@hkdigital/lib-sveltekit 0.2.21 → 0.2.22

package/dist/util/design-system/components/states.js

@@ -1,22 +1,22 @@
-/**
- * Generates state classes from an object of state variables
- *
- * @param {Object.<string, boolean>} stateObject
- *   Object with state names as keys and boolean values
- *
- * @returns {string} Space-separated string of state classes
- *
- * @example
- * // Returns "state-selected state-error"
- * toStateClasses({ selected: true, loading: false, error: true });
- */
-export function toStateClasses(stateObject) {
-  if (!stateObject || typeof stateObject !== 'object') {
-    return '';
-  }
-
-  return Object.entries(stateObject)
-    .filter((entry) => entry[1] === true)
-    .map(([state]) => `state-${state}`)
-    .join(' ');
-}
+/**
+ * Generates state classes from an object of state variables
+ *
+ * @param {Object.<string, boolean>} stateObject
+ *   Object with state names as keys and boolean values
+ *
+ * @returns {string} Space-separated string of state classes
+ *
+ * @example
+ * // Returns "state-selected state-error"
+ * toStateClasses({ selected: true, loading: false, error: true });
+ */
+export function toStateClasses(stateObject) {
+  if (!stateObject || typeof stateObject !== 'object') {
+    return '';
+  }
+
+  return Object.entries(stateObject)
+    .filter((entry) => entry[1] === true)
+    .map(([state]) => `state-${state}`)
+    .join(' ');
+}

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

@@ -1,66 +1,66 @@
-import { getRootCssVar } from '../../css/index.js';
-
-/**
- * Cache to that ensures we parse CSS clamp parameters only once
- * @type {Object.<string, {min: number, max: number}>}
- */
-let clampParamCache = {};
-
-/**
- * Extract clamp parameters from a CSS variable
- *
- * @param {string} varName - CSS variable name without '--'
- * @returns {Object} Object with min and max values
- * @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
- */
-export function getClampParams(varName) {
-  // Check cache first
-  if (clampParamCache[varName]) {
-    return clampParamCache[varName];
-  }
-
-  // Get the CSS variable value using the existing utility
-  const declaration = getRootCssVar(varName);
-
-  if (declaration === null) {
-    throw new Error(`CSS variable --${varName} not found`);
-  }
-
-  // Parse clamp() function values
-  const clampMatch =
-    typeof declaration === 'string'
-      ? declaration.match(
-          /clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
-        )
-      : null;
-
-  if (!clampMatch || clampMatch.length < 3) {
-    // console.log(declaration);
-    throw new Error(
-      `CSS variable --${varName} does not contain a valid clamp function`
-    );
-  }
-
-  const min = parseFloat(clampMatch[1]);
-  const max = parseFloat(clampMatch[2]);
-
-  if (isNaN(min) || isNaN(max)) {
-    throw new Error(`Invalid min/max values in CSS variable --${varName}`);
-  }
-
-  // Cache the result
-  clampParamCache[varName] = { min, max };
-  return { min, max };
-}
-
-/**
- * CSS clamp function implementation
- *
- * @param {number} min - Minimum value
- * @param {number} value - Value to clamp
- * @param {number} max - Maximum value
- * @returns {number} Clamped value
- */
-export function clamp(min, value, max) {
-  return Math.max(min, Math.min(value, max));
-}
+import { getRootCssVar } from '../../css/index.js';
+
+/**
+ * Cache to that ensures we parse CSS clamp parameters only once
+ * @type {Object.<string, {min: number, max: number}>}
+ */
+let clampParamCache = {};
+
+/**
+ * Extract clamp parameters from a CSS variable
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @returns {Object} Object with min and max values
+ * @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
+ */
+export function getClampParams(varName) {
+  // Check cache first
+  if (clampParamCache[varName]) {
+    return clampParamCache[varName];
+  }
+
+  // Get the CSS variable value using the existing utility
+  const declaration = getRootCssVar(varName);
+
+  if (declaration === null) {
+    throw new Error(`CSS variable --${varName} not found`);
+  }
+
+  // Parse clamp() function values
+  const clampMatch =
+    typeof declaration === 'string'
+      ? declaration.match(
+          /clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
+        )
+      : null;
+
+  if (!clampMatch || clampMatch.length < 3) {
+    // console.log(declaration);
+    throw new Error(
+      `CSS variable --${varName} does not contain a valid clamp function`
+    );
+  }
+
+  const min = parseFloat(clampMatch[1]);
+  const max = parseFloat(clampMatch[2]);
+
+  if (isNaN(min) || isNaN(max)) {
+    throw new Error(`Invalid min/max values in CSS variable --${varName}`);
+  }
+
+  // Cache the result
+  clampParamCache[varName] = { min, max };
+  return { min, max };
+}
+
+/**
+ * CSS clamp function implementation
+ *
+ * @param {number} min - Minimum value
+ * @param {number} value - Value to clamp
+ * @param {number} max - Maximum value
+ * @returns {number} Clamped value
+ */
+export function clamp(min, value, max) {
+  return Math.max(min, Math.min(value, max));
+}

package/dist/util/design-system/css/root-design-vars.js

@@ -1,102 +1,102 @@
-import { getRootCssVar } from '../../css/css-vars.js';
-
-/**
- * Generates a complete HTML style tag with CSS custom properties for
- * the design system based on provided configuration.
- *
- * @param {Object} design - Design dimensions configuration
- * @param {number} design.width - The design width in pixels
- * @param {number} design.height - The design height in pixels
- * @param {Object} clamping - Scaling configuration parameters
- * @param {Object} clamping.ui - UI clamping configuration
- * @param {number} clamping.ui.min - Minimum UI scaling factor
- * @param {number} clamping.ui.max - Maximum UI scaling factor
- * @param {Object} clamping.textBase - Base text scaling configuration
- * @param {number} clamping.textBase.min - Minimum base text scaling
- * @param {number} clamping.textBase.max - Maximum base text scaling
- * @param {Object} clamping.textHeading - Heading text clamping configuration
- * @param {number} clamping.textHeading.min - Minimum heading text scaling
- * @param {number} clamping.textHeading.max - Maximum heading text scaling
- * @param {Object} clamping.textUi - UI text clamping configuration
- * @param {number} clamping.textUi.min - Minimum UI text scaling
- * @param {number} clamping.textUi.max - Maximum UI text scaling
- *
- * @returns {string} Complete HTML style tag with design system CSS variables
- *
- * @example
- * // +layout.svelte
- * <script>
- * import { DESIGN, CLAMPING } from '../../../tailwind/extend/clamping/config.js';
- *
- * import { rootDesignVarsHTML } from '../index.js';
- * </script>
- *
- * <svelte:head>
- * {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
- * </svelte:head>
- *
- * // Generates style tag for use in svelte:head
- * // <style>:root { --design-width: 1920; ... }</style>
- */
-export function rootDesignVarsHTML(design, clamping) {
-  return `<style>:root {
-      /* Design dimensions */
-      --design-width: ${design.width};
-      --design-height: ${design.height};
-
-      /* Scaling factors */
-      --scale-w: 1;
-      --scale-h: 1;
-
-      /* --scale-viewport: min(var(--scale-w), var(--scale-h)); */
-      --scale-viewport: 1;
-
-      /* Base clamping units */
-      --scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
-      --scale-text-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.max});
-      --scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});
-      --scale-text-ui: clamp(${clamping.textUi.min}, var(--scale-viewport), ${clamping.textUi.max});
-    }</style>`;
-}
-
-/**
- * Get design width from CSS variables
- *
- * @returns {number} Design width
- */
-export function getRootCssDesignWidth() {
-  return getRootCssVar('design-width');
-}
-
-/**
- * Get design height from CSS variables
- *
- * @returns {number} Design height
- */
-export function getRootCssDesignHeight() {
-  return getRootCssVar('design-height');
-}
-
-/**
- * Retrieves all current scaling factors from CSS variables
- *
- * @returns {Object} An object containing all scaling factors
- */
-export function getAllRootScalingVars() {
-  const styles = getComputedStyle(document.documentElement);
-
-  return {
-    scaleW: parseFloat(styles.getPropertyValue('--scale-w').trim()) || 0,
-    scaleH: parseFloat(styles.getPropertyValue('--scale-h').trim()) || 0,
-    scaleViewport:
-      parseFloat(styles.getPropertyValue('--scale-viewport').trim()) || 0,
-
-    scaleUI: parseFloat(styles.getPropertyValue('--scale-ui').trim()) || 0,
-    scaleTextBase:
-      parseFloat(styles.getPropertyValue('--scale-text-base').trim()) || 0,
-    scaleTextHeading:
-      parseFloat(styles.getPropertyValue('--scale-text-heading').trim()) || 0,
-    scaleTextUI:
-      parseFloat(styles.getPropertyValue('--scale-text-ui').trim()) || 0
-  };
-}
+import { getRootCssVar } from '../../css/css-vars.js';
+
+/**
+ * Generates a complete HTML style tag with CSS custom properties for
+ * the design system based on provided configuration.
+ *
+ * @param {Object} design - Design dimensions configuration
+ * @param {number} design.width - The design width in pixels
+ * @param {number} design.height - The design height in pixels
+ * @param {Object} clamping - Scaling configuration parameters
+ * @param {Object} clamping.ui - UI clamping configuration
+ * @param {number} clamping.ui.min - Minimum UI scaling factor
+ * @param {number} clamping.ui.max - Maximum UI scaling factor
+ * @param {Object} clamping.textBase - Base text scaling configuration
+ * @param {number} clamping.textBase.min - Minimum base text scaling
+ * @param {number} clamping.textBase.max - Maximum base text scaling
+ * @param {Object} clamping.textHeading - Heading text clamping configuration
+ * @param {number} clamping.textHeading.min - Minimum heading text scaling
+ * @param {number} clamping.textHeading.max - Maximum heading text scaling
+ * @param {Object} clamping.textUi - UI text clamping configuration
+ * @param {number} clamping.textUi.min - Minimum UI text scaling
+ * @param {number} clamping.textUi.max - Maximum UI text scaling
+ *
+ * @returns {string} Complete HTML style tag with design system CSS variables
+ *
+ * @example
+ * // +layout.svelte
+ * <script>
+ * import { DESIGN, CLAMPING } from '../../../tailwind/extend/clamping/config.js';
+ *
+ * import { rootDesignVarsHTML } from '../index.js';
+ * </script>
+ *
+ * <svelte:head>
+ * {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
+ * </svelte:head>
+ *
+ * // Generates style tag for use in svelte:head
+ * // <style>:root { --design-width: 1920; ... }</style>
+ */
+export function rootDesignVarsHTML(design, clamping) {
+  return `<style>:root {
+      /* Design dimensions */
+      --design-width: ${design.width};
+      --design-height: ${design.height};
+
+      /* Scaling factors */
+      --scale-w: 1;
+      --scale-h: 1;
+
+      /* --scale-viewport: min(var(--scale-w), var(--scale-h)); */
+      --scale-viewport: 1;
+
+      /* Base clamping units */
+      --scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
+      --scale-text-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.max});
+      --scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});
+      --scale-text-ui: clamp(${clamping.textUi.min}, var(--scale-viewport), ${clamping.textUi.max});
+    }</style>`;
+}
+
+/**
+ * Get design width from CSS variables
+ *
+ * @returns {number} Design width
+ */
+export function getRootCssDesignWidth() {
+  return getRootCssVar('design-width');
+}
+
+/**
+ * Get design height from CSS variables
+ *
+ * @returns {number} Design height
+ */
+export function getRootCssDesignHeight() {
+  return getRootCssVar('design-height');
+}
+
+/**
+ * Retrieves all current scaling factors from CSS variables
+ *
+ * @returns {Object} An object containing all scaling factors
+ */
+export function getAllRootScalingVars() {
+  const styles = getComputedStyle(document.documentElement);
+
+  return {
+    scaleW: parseFloat(styles.getPropertyValue('--scale-w').trim()) || 0,
+    scaleH: parseFloat(styles.getPropertyValue('--scale-h').trim()) || 0,
+    scaleViewport:
+      parseFloat(styles.getPropertyValue('--scale-viewport').trim()) || 0,
+
+    scaleUI: parseFloat(styles.getPropertyValue('--scale-ui').trim()) || 0,
+    scaleTextBase:
+      parseFloat(styles.getPropertyValue('--scale-text-base').trim()) || 0,
+    scaleTextHeading:
+      parseFloat(styles.getPropertyValue('--scale-text-heading').trim()) || 0,
+    scaleTextUI:
+      parseFloat(styles.getPropertyValue('--scale-text-ui').trim()) || 0
+  };
+}

package/dist/util/design-system/index.js

@@ -1,5 +1,5 @@
-export * from './css/clamp.js';
-export * from './css/root-design-vars.js';
-export * from './components/states.js';
-export * from './layout/scaling.js';
-export * from './tailwind.js';
+export * from './css/clamp.js';
+export * from './css/root-design-vars.js';
+export * from './components/states.js';
+export * from './layout/scaling.js';
+export * from './tailwind.js';