@hkdigital/lib-sveltekit 0.0.94 → 0.0.96

package/dist/components/rows/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PanelGridRow } from "./panel-grid-row/PanelGridRow.svelte";
+export { default as PanelRow2 } from "./panel-row-2/PanelRow2.svelte";

package/dist/components/rows/index.js

@@ -0,0 +1,3 @@
+export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
+
+export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';

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/compare-left-right/CompareLeftRight.svelte

@@ -1,4 +1,3 @@
-<!-- CompareLeftRight.svelte -->
 <script>
   /** @type {HTMLElement | null} */
   let container = $state(null);
@@ -13,11 +12,16 @@
     handleColor?: string
   } & Record<string, any>} */
   let {
-    leftContent,
-    rightContent,
+    width='w-[100vw]',
+    height='aspect-video',
+    border='border border-surface-500',
     classes = '',
     dividerColor = 'bg-surface-500',
     handleColor = 'bg-surface-700',
+
+    // Snippets
+    leftContent,
+    rightContent,
     ...attrs
   } = $props();
 
@@ -114,7 +118,7 @@
 
 <div
   bind:this={container}
-  class="relative flex h-full w-full overflow-hidden {classes}"
+  class="relative {width} {height} {border} {classes}"
   role="group"
   aria-label="Content comparison"
   {...attrs}
@@ -140,16 +144,16 @@
 
   <!-- Slider control -->
   <div
-    class="absolute inset-y-0 z-10 flex w-1 cursor-col-resize items-center justify-center {dividerColor}"
+    class="absolute inset-y-0 z-10 flex w-1 items-center justify-center {dividerColor}"
     style={dividerStyle}
   >
     <!-- Vertical separator line -->
-    <div class="absolute inset-y-0 w-0.5 bg-current opacity-50"></div>
+    <div class="absolute inset-y-0 w-0.5 bg-current opacity-50 pointer-events-none"></div>
 
     <button
-      class="flex h-10 w-10 items-center justify-center rounded-full shadow-lg hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 {handleColor}"
-      on:mousedown={handleMouseDown}
-      on:keydown={handleKeyDown}
+      class="flex h-10 w-10 items-center justify-center rounded-full shadow-lg transition-transform {handleColor}"
+      onmousedown={handleMouseDown}
+      onkeydown={handleKeyDown}
       role="slider"
       aria-orientation="vertical"
       aria-valuenow={position}

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

@@ -0,0 +1,49 @@
+export const spacing: {
+    '5p': string;
+    '10p': string;
+    '20p': string;
+    '30p': string;
+    '40p': string;
+    '50p': string;
+    '60p': string;
+    '80p': string;
+    '100p': string;
+    '120p': string;
+    '160p': string;
+    '180p': string;
+    '1p': string;
+    '2p': string;
+    '4p': string;
+    '6p': string;
+    '8p': string;
+    '16p': string;
+    '24p': string;
+};
+export const fontSize: {
+    '12p': string;
+    '14p': string;
+    '16p': string;
+    '18p': string;
+    '20p': string;
+    '24p': string;
+    '32p': string;
+    '50p': string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: 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

@@ -0,0 +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',
+
+  // Text related spacing
+  '1p': '0.0625rem',
+  '2p': '0.125rem',
+  '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 borderRadius = {
+  none: 0,
+  xs: '0.250rem',
+  sm: '0.875rem',
+  md: '1.25rem',
+  lg: '2rem',
+  xl: '3.125rem',
+  full: '9999px'
+};
+
+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/css/tw-prose.postcss__

@@ -0,0 +1,259 @@
+/* Base prose styles */
+.prose {
+  font-size: 1rem;
+  line-height: 1.75;
+  max-width: 65ch;
+}
+
+.prose > * + * {
+  margin-top: 1.25em;
+}
+
+/* Headings */
+.prose h1 {
+  font-size: 2.25em;
+  line-height: 1.1111111;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  font-weight: 800;
+}
+
+.prose h2 {
+  font-size: 1.5em;
+  line-height: 1.3333333;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  font-weight: 700;
+}
+
+.prose h3 {
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  font-weight: 600;
+}
+
+.prose h4 {
+  font-size: 1.125em;
+  line-height: 1.5;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+
+/* Paragraphs */
+.prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+/* Lists */
+.prose ul,
+.prose ol {
+  padding-left: 1.625em;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose > ul > li p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose > ul > li > *:first-child {
+  margin-top: 1.25em;
+}
+
+.prose > ul > li > *:last-child {
+  margin-bottom: 1.25em;
+}
+
+/* Nested lists */
+.prose ul ul, 
+.prose ul ol,
+.prose ol ul,
+.prose ol ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+/* Links */
+.prose a {
+  color: #111827;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.prose a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* Code blocks */
+.prose code {
+  color: #111827;
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  color: #e5e7eb;
+  background-color: #1f2937;
+  overflow-x: auto;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding: 0.8571429em 1.1428571em;
+}
+
+.prose pre code {
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0;
+  font-weight: 400;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+/* Blockquotes */
+.prose blockquote {
+  font-weight: 500;
+  font-style: italic;
+  color: #111827;
+  border-left-width: 0.25rem;
+  border-left-color: #e5e7eb;
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+
+/* Tables */
+.prose table {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+
+.prose thead {
+  font-weight: 600;
+  border-bottom-width: 1px;
+  border-bottom-color: #d1d5db;
+}
+
+.prose thead th {
+  vertical-align: bottom;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.prose tbody tr {
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e7eb;
+}
+
+.prose tbody td {
+  vertical-align: top;
+  padding: 0.5714286em;
+}
+
+/* Size variations */
+.prose-sm {
+  font-size: 0.875rem;
+  line-height: 1.7142857;
+}
+
+.prose-lg {
+  font-size: 1.125rem;
+  line-height: 1.7777778;
+}
+
+.prose-xl {
+  font-size: 1.25rem;
+  line-height: 1.8;
+}
+
+/* Dark mode */
+.prose-invert {
+  color: #d1d5db;
+}
+
+.prose-invert a {
+  color: #fff;
+}
+
+.prose-invert strong {
+  color: #fff;
+}
+
+.prose-invert code {
+  color: #fff;
+}
+
+.prose-invert thead {
+  border-bottom-color: #4b5563;
+}
+
+.prose-invert tbody tr {
+  border-bottom-color: #374151;
+}
+
+.prose-invert blockquote {
+  color: #9ca3af;
+  border-left-color: #4b5563;
+}
+
+/* Images */
+.prose img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose figure figcaption {
+  color: #6b7280;
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+
+/* Custom elements */
+.prose hr {
+  border-color: #e5e7eb;
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+.prose strong {
+  font-weight: 600;
+  color: #111827;
+}
+
+.prose em {
+  font-style: italic;
+}
+
+/* Focus styles */
+.prose a:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  text-decoration-thickness: 2px;
+}

package/dist/index.js

@@ -1,9 +0,0 @@
-//
-// @note all exports are in subfolders
-//
-// @see package.json > exports
-//
-// @example
-// import { TimeStampSource } from '@hkdigital/lib-sveltekit/classes';
-//
-//

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;
+    }*/
+  }
+}