@hkdigital/lib-sveltekit 0.0.95 → 0.0.97

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

@@ -0,0 +1,104 @@
+<script>
+  /**
+   * @example
+   *
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   justify?: 'start'|'center'|'end'|'between'|'around'|'evenly'|'stretch'|'normal',
+   *   justifyItems?: 'start'|'center'|'end'|'stretch',
+   *   gap?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   * } & { [attr: string]: * }}
+   */
+  const {
+    // Style
+    base,
+    bg,
+    justify,
+    justifyItems,
+    flow = 'col',
+    gap,
+    classes,
+
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  let colsCls = $derived.by(() => {
+    //
+    // The CSS classes to apply for the desired column layout
+    //
+    let out = '';
+
+    /* @note justify-end won't work with auto-cols-fr! */
+
+    if (justifyItems && justify !== 'end') {
+      out += 'auto-cols-fr';
+    } else {
+      out += 'auto-cols-auto';
+    }
+
+    if (flow) {
+      out += ` grid-flow-${flow}`;
+    }
+
+    // TODO: CSS for a specific number of columns
+
+    return out.replace(/\s{2,}/g, ' ').trim();
+  });
+
+  let justifyCls = $derived.by(() => {
+    //
+    // Determine justify classes
+    //
+    if (justify) {
+      return `justify-${justify}`;
+    }
+
+    return '';
+  });
+
+  let justifyItemsCls = $derived.by(() => {
+    //
+    // Determine justify-items classes
+    //
+    if (justifyItems) {
+      return `justify-items-${justifyItems}`;
+    }
+
+    return '';
+  });
+</script>
+
+<div
+  data-row="panel-grid-row"
+  class="{base} {bg} {gap} {classes} grid {colsCls} {justifyCls} {justifyItemsCls}"
+  {...attrs}
+>
+  {@render children()}
+</div>
+
+<style>
+  /* This rule makes justify-items-start behave like
+     justify-items-center and justify-items-end */
+  /*[data-row='panel-grid-row'] {
+    & > :global(*) {
+      width: fit-content;
+      height: fit-content;
+    }
+  }*/
+
+  /*[data-row='panel-grid-row'] {
+    & > :global(*) {
+      min-width: 0;
+    }
+  }*/
+</style>

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

@@ -0,0 +1,12 @@
+export default PanelGridRow;
+declare const PanelGridRow: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+    justifyItems?: "start" | "center" | "end" | "stretch";
+    gap?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "">;

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

@@ -0,0 +1,40 @@
+<script>
+  import { PanelGridRow } from '../index.js';
+
+  /**
+   * @example
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   justify?: 'start'|'center'|'end'|'between'|'around'|'evenly'|'stretch'|'normal',
+   *   justifyItems?: 'start'|'center'|'end'|'stretch',
+   *   gap?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   * } & { [attr: string]: * }}
+   */
+  const {
+    // Style
+    // base,
+    // bg,
+    // justify,
+    // justifyItems,
+    // flow = 'col',
+    // gap,
+    // classes,
+
+    // // Snippets
+    // children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<!-- class="test-small mb-8p mt-8 grid auto-cols-fr grid-flow-col justify-stretch gap-20p" -->
+
+<PanelGridRow data-wrapper="panel-row-2" gap="gap-20p" {...attrs}
+></PanelGridRow>

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

@@ -0,0 +1,12 @@
+export default PanelRow2;
+declare const PanelRow2: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+    justifyItems?: "start" | "center" | "end" | "stretch";
+    gap?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/widgets/scale-control/ScaleControl.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ScaleControl;
+type ScaleControl = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const ScaleControl: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/widgets/scale-control/index.d.ts

@@ -0,0 +1 @@
+export { default as ScaleControl } from "./ScaleControl.svelte";

package/dist/components/widgets/scale-control/index.js

@@ -0,0 +1 @@
+export { default as ScaleControl } from './ScaleControl.svelte';

package/dist/config/tailwind.extend.d.ts

@@ -11,6 +11,8 @@ export const spacing: {
     '120p': string;
     '160p': string;
     '180p': string;
+    '1p': string;
+    '2p': string;
     '4p': string;
     '6p': string;
     '8p': string;
@@ -18,7 +20,10 @@ export const spacing: {
     '24p': string;
 };
 export const fontSize: {
+    '12p': string;
+    '14p': string;
     '16p': string;
+    '18p': string;
     '20p': string;
     '24p': string;
     '32p': string;
@@ -27,23 +32,18 @@ export const fontSize: {
     base: string;
     lg: string;
     xl: string;
-    '2xl': string;
-    '3xl': string;
-    '4xl': string;
-    '5xl': string;
-    '6xl': string;
-    '7xl': string;
-    '8xl': string;
-    '9xl': string;
 };
 export namespace borderRadius {
     let none: number;
+    let xs: string;
     let sm: string;
     let md: string;
     let lg: string;
+    let xl: string;
     let full: string;
 }
 export const borderWidth: {
     '1p': string;
     '2p': string;
+    '4p': string;
 };

package/dist/config/tailwind.extend.js

@@ -1,60 +1,56 @@
+export const spacing = {
+  // Between elements spacing
+  '5p': '0.3125rem',
+  '10p': '0.625rem',
+  '20p': '1.25rem',
+  '30p': '1.875rem',
+  '40p': '2.5rem',
+  '50p': '3.125rem',
+  '60p': '3.75rem',
+  '80p': '5rem',
+  '100p': '6.25rem',
+  '120p': '7.5rem',
+  '160p': '10rem',
+  '180p': '11.25rem',
 
-export const spacing =
-  {
-    '5p': '0.3125rem',
-    '10p': '0.625rem',
-    '20p': '1.25rem',
-    '30p': '1.875rem',
-    '40p': '2.5rem',
-    '50p': '3.125rem',
-    '60p': '3.75rem',
-    '80p': '5rem',
-    '100p': '6.25rem',
-    '120p': '7.5rem',
-    '160p': '10rem',
-    '180p': '11.25rem',
+  // Text related spacing
+  '1p': '0.0625rem',
+  '2p': '0.125rem',
+  '4p': '0.25rem',
+  '6p': '0.375rem',
+  '8p': '0.5rem',
+  '16p': '1rem',
+  '24p': '1.5rem'
+};
 
-    '4p': '0.25rem',
-    '6p': '0.375rem',
-    '8p': '0.5rem',
-    '16p': '1rem',
-    '24p': '1.5rem'
-  };
+export const fontSize = {
+  '12p': '0.75rem',
+  '14p': '0.875rem',
+  '16p': '1rem',
+  '18p': '1.125rem',
+  '20p': '1.25rem',
+  '24p': '1.5rem',
+  '32p': '2rem',
+  '50p': '3.125rem',
 
+  sm: '0.875rem',
+  base: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem'
+};
 
-export const fontSize =
-  {
-    '16p': '1rem',
-    '20p': '1.25rem',
-    '24p': '1.5rem',
-    '32p': '2rem',
-    '50p': '3.125rem',
+export const borderRadius = {
+  none: 0,
+  xs: '0.250rem',
+  sm: '0.875rem',
+  md: '1.25rem',
+  lg: '2rem',
+  xl: '3.125rem',
+  full: '9999px'
+};
 
-    'sm': '87.5%',
-    'base': '100%', // 16
-    'lg': '112.5%', // 18
-    'xl': '125%', // 20
-    '2xl': '150%', // 24
-    '3xl': '187.5%', // 30
-    '4xl': '250%', // 40
-    '5xl': '312.5%', // 50
-    '6xl': '375%', // 60
-    '7xl': '450%', // 72
-    '8xl': '600%', // 96
-    '9xl': '800%x' // 128
-  };
-
-export const borderRadius =
-  {
-    none: 0,
-    sm: '0.875rem',
-    md: '1.25rem',
-    lg: '2.5rem',
-    full: '9999px'
-  };
-
-export const borderWidth =
-  {
-    '1p': '0.0625rem',
-    '2p': '0.125rem'
-  };
+export const borderWidth = {
+  '1p': '0.0625rem',
+  '2p': '0.125rem',
+  '4p': '0.250rem'
+};

package/dist/constants/css-states/index.d.ts

@@ -0,0 +1 @@
+export * from "./input-states.js";

package/dist/constants/css-states/index.js

@@ -0,0 +1 @@
+export * from './input-states.js';

package/dist/constants/css-states/input-states.d.ts

@@ -0,0 +1,8 @@
+export const PRISTINE: "pristine";
+export const DIRTY: "dirty";
+export const FOCUSED: "focused";
+export const UNFOCUSED: "unfocused";
+export const VALID: "valid";
+export const INVALID: "invalid";
+export const REQUIRED: "required";
+export const DISABLED: "disabled";

package/dist/constants/css-states/input-states.js

@@ -0,0 +1,11 @@
+export const PRISTINE = 'pristine';
+export const DIRTY = 'dirty';
+
+export const FOCUSED = 'focused';
+export const UNFOCUSED = 'unfocused';
+
+export const VALID = 'valid';
+export const INVALID = 'invalid';
+
+export const REQUIRED = 'required';
+export const DISABLED = 'disabled';

package/dist/constants/index.js

@@ -1,2 +1,3 @@
 export * as regexp from './regexp/index.js';
 export * as time from './time.js';
+//export * as cssStates from './css-states/index.js';

package/dist/index.d.ts

@@ -1 +0,0 @@
-declare const jens: 12345;

package/dist/index.js

@@ -1,6 +0,0 @@
-// // @note all exports are in subfolders // // @see package.json > exports //
-// @example // import {TimeStampSource} from '@hkdigital/lib-sveltekit/classes';
-
-const jens = 12345;
-
-console.log(jens);

package/dist/themes/hkdev/components/boxes/game-box.postcss

@@ -0,0 +1,13 @@
+@import "../../global/on-colors.postcss";
+
+@define-mixin boxes-game-box {
+
+  [data-boxes="game-box"] {
+    /*& .game-box-padding-20p {
+      @apply mt-20p;
+      @apply mr-20p;
+      @apply mb-20p;
+      @apply ml-20p;
+    }*/
+  }
+}

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

@@ -0,0 +1,73 @@
+
+@import "../../global/on-colors.postcss";
+
+@define-mixin buttons-plain-button {
+
+  [data-button="plain-button"] {
+    @apply py-6p rounded-sm;
+
+     & p {
+      @apply text-20p base-font-family font-black my-0 mx-16p uppercase;
+    }
+
+    /* not disabled */
+
+    &:not([disabled]) {
+      &.role-primary {
+        @apply border-4p border-primary-500 bg-primary-500;
+        & .p {
+          color: rgb(var(--color-primary-50));
+        }
+      }
+
+      &.role-secondary {
+        @apply border-4p border-primary-500;
+
+        & .p {
+          color: rgb(var(--color-primary-500));
+        }
+
+        &.variant-white
+        {
+          @apply border-surface-50;
+
+          & .p {
+            color: rgb(var(--color-surface-50));
+          }
+        }
+      }
+    }
+
+    /* disabled */
+
+    &[disabled] {
+      &.role-primary {
+        @apply bg-surface-500;
+        & .p {
+          color: rgb(var(--color-surface-300));
+        }
+      }
+
+      &.role-secondary {
+        @apply border-4p bg-primary-50;
+
+        & .p {
+          color: rgb(var(--color-surface-300));
+        }
+      }
+
+    }
+  }
+
+
+
+  /*[data-button-round-arrow-next] {
+    / * @apply bg-primary-500; * /
+    @apply text-24p base-font-family font-bold;
+
+    & svg {
+      color: rgb(var(--color-primary-500));    
+      @apply w-80p h-80p;
+    }
+  }*/
+}

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

@@ -0,0 +1,8 @@
+@import "../../global/on-colors.postcss";
+
+@define-mixin buttons-skip-button {
+
+  [data-button="skip-button"] {
+
+  }
+}

package/dist/themes/hkdev/components/inputs/text-input.postcss

@@ -0,0 +1,108 @@
+
+/*@import "../../global/on-colors.postcss";*/
+
+@define-mixin inputs-text-input {
+
+  [data-input="text-input"] {
+
+    /* Base */
+
+
+
+    /* Required and disabled */
+
+    &.required {}
+    &.disabled {}
+
+    /* Focus */
+
+    &.focused {
+      border: solid thin black;
+
+      & [data-child="legend"] {
+        color: black;
+      }
+
+      & [data-child="input"] {
+        color: black;
+      }
+    }
+
+    &.unfocused {
+      border: solid thin grey;
+
+      & [data-child="legend"] {
+        color: grey;
+      }
+
+      & [data-child="input"] {
+        color: grey;
+      }
+    }
+
+    /* Invalid */
+    &.invalid {
+      &.pristine [data-child="legend"] {
+        color: white;
+        background-color: orange;
+      }
+
+      &.dirty {
+        &.focused [data-child="legend"] {
+          color: black;
+          background-color: yellow;
+        }
+
+        &.unfocused [data-child="legend"] {
+          color: white;
+          background-color: red;
+        }
+      }
+    }
+
+    /* Pristine (valid-invalid) */
+
+    &.pristine.valid {
+      & [data-child="icon-box"] {
+        color: grey;
+      }
+    }
+
+    &.pristine.invalid {
+      & [data-child="icon-box"] {
+        color: orange;
+      }
+    }
+
+    /* Dirty (valid-invalid) */
+
+    &.dirty.valid {
+      &.focused {
+        & [data-child="icon-box"] {
+          color: grey;
+        }
+      }
+
+      &.unfocused {
+        & [data-child="icon-box"] {
+          color: green;
+        }
+      }
+    }
+
+    &.dirty.invalid {
+      &.focused {
+        & [data-child="icon-box"] {
+          color: orange;
+        }
+      }
+
+      &.unfocused {
+        & [data-child="icon-box"] {
+          color: red;
+        }
+      }
+    }
+
+  }
+}

package/dist/themes/hkdev/components/panels/plain-panel.postcss

@@ -0,0 +1,46 @@
+/*@import "../../global/on-colors.postcss";*/
+
+@define-mixin panels-plain-panel {
+  [data-panel="plain-panel"] {
+
+    @mixin on_surface_light;
+    @apply bg-primary-50;
+
+    @apply p-40p rounded-md;
+
+    max-width: 50vw;
+/*    max-width: 27vw;*/
+    /* width: 26vw; */
+
+    & picture {
+      display: block;
+      max-width: 100%;
+      @apply pr-80p;      
+      /* border: solid 1px red; */
+    }
+
+    & > .h1 {
+      @apply text-32p mb-20p;
+    }
+
+    & > .p {
+      @apply text-24p mb-10p;
+
+      & + picture {
+        @apply mt-40p;
+      }
+      
+    }
+
+    & button {
+      /* @apply min-w-180p; */
+    }
+
+    & .cc_cols-stretch {
+      @apply grid auto-cols-fr grid-flow-col;
+      @apply justify-stretch;
+
+      border: solid 8px red;
+    }
+  }
+}