@hkdigital/lib-sveltekit 0.0.99 → 0.1.1

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

@@ -0,0 +1,289 @@
+/**
+ * Generates text-based spacing units with with different scaling
+ * units (ut, ct, ht)
+ *
+ * @param {number[]} values
+ *   Array of pixel values to generate text-based spacing units for
+ *
+ * @returns {{[key: string]: string}}
+ *   Generated text-based spacing units with ut, ct, and ht suffixes
+ *
+ * @throws {Error} If values is not an array or contains non-numeric values
+ *
+ * @example
+ * generateTextBasedSpacing([1, 2, 4, 8])
+ * // Returns:
+ * // {
+ * //   '1ut': 'calc(1px * var(--scale-text-ui))',
+ * //   '2ut': 'calc(2px * var(--scale-text-ui))',
+ * //   '1ct': 'calc(1px * var(--scale-text-content))',
+ * //   '2ct': 'calc(2px * var(--scale-text-content))',
+ * //   '1ht': 'calc(1px * var(--scale-text-heading))',
+ * //   '2ht': 'calc(2px * var(--scale-text-heading))'
+ * // }
+ */
+export function generateTextBasedSpacing(values) {
+  if (!Array.isArray(values)) {
+    throw new Error('values must be an array');
+  }
+
+  return values.reduce((units, value) => {
+    if (typeof value !== 'number' || isNaN(value)) {
+      throw new Error(`Invalid spacing value: ${value}. Must be a number.`);
+    }
+
+    // Generate UI text spacing units
+    units[`${value}ut`] = `calc(${value}px * var(--scale-text-ui))`;
+
+    // Generate content text spacing units
+    units[`${value}ct`] = `calc(${value}px * var(--scale-text-content))`;
+
+    // Generate heading text spacing units
+    units[`${value}ht`] = `calc(${value}px * var(--scale-text-heading))`;
+
+    return units;
+  }, {});
+}
+
+/**
+ * Generates viewport-based spacing units with different scaling
+ * units (p, vp, wp, hp)
+ *
+ * @param {number[]} values
+ *   Array of pixel values to generate viewport-based spacing units for
+ *
+ * @returns {Object.<string, string>}
+ *   Generated viewport-based spacing units:
+ *   - p:  UI points (clamped scaling)
+ *   - vp: Viewport points (min of width/height)
+ *   - wp: Width points
+ *   - hp: Height points
+ *
+ * @throws {Error} If values is not an array or contains non-numeric values
+ *
+ * @example
+ * generateViewportBasedSpacing([1, 2, 4])
+ * // Returns:
+ * // {
+ * //   '1p': 'calc(1px * var(--scale-ui))',
+ * //   '1vp': 'calc(1px * var(--scale-viewport))',
+ * //   '1wp': 'calc(1px * var(--scale-w))',
+ * //   '1hp': 'calc(1px * var(--scale-h))'
+ * // }
+ */
+export function generateViewportBasedSpacing(values) {
+  if (!Array.isArray(values)) {
+    throw new Error('values must be an array');
+  }
+
+  return values.reduce((units, value) => {
+    if (typeof value !== 'number' || isNaN(value)) {
+      throw new Error(`Invalid spacing value: ${value}. Must be a number.`);
+    }
+
+    // Viewport points (min of width/height)
+    units[`${value}vp`] = `calc(${value}px * var(--scale-viewport))`;
+    // Width points
+    units[`${value}wp`] = `calc(${value}px * var(--scale-w))`;
+    // Height points
+    units[`${value}hp`] = `calc(${value}px * var(--scale-h))`;
+    // UI points
+    units[`${value}p`] = `calc(${value}px * var(--scale-ui))`;
+    return units;
+  }, {});
+}
+
+/**
+ * Generates semantic text style definitions for a specific text category
+ * (content, UI, or heading). Each style includes a scaled font size and
+ * line height.
+ *
+ * @param {{[key: string]: {size: number, lineHeight?: number}}} sizes
+ *   Set of text sizes to generate styles for
+ *
+ * @param {'content' | 'ui' | 'heading'} category
+ *   Text category to generate styles for
+ *
+ * @returns {{[key: string]: [string, {lineHeight: number}]}}
+ *   Generated text styles in Tailwind format
+ *
+ * @throws {Error} If a size has an invalid size or lineHeight
+ *
+ * @example
+ * const TEXT_CONTENT_SIZES = {
+ *   sm: { size: 16, lineHeight: 1.5 },
+ *   base: { size: 20, lineHeight: 1.5 },
+ *   lg: { size: 24, lineHeight: 1.4 }
+ * };
+ *
+ * generateTextStyles(TEXT_CONTENT_SIZES, 'content');
+ * // Returns:
+ * // {
+ * //   'content-sm':
+ * //     ['calc(16px * var(--scale-text-content))', { lineHeight: 1.5 }],
+ * //   'content-base':
+ * //     ['calc(20px * var(--scale-text-content))', { lineHeight: 1.5 }],
+ * //   'content-lg':
+ * //     ['calc(24px * var(--scale-text-content))', { lineHeight: 1.4 }]
+ * // }
+ */
+export function generateTextStyles(sizes, category) {
+  if (!sizes || typeof sizes !== 'object') {
+    throw new Error('sizes must be an object');
+  }
+
+  if (!['content', 'ui', 'heading'].includes(category)) {
+    throw new Error('category must be one of: content, ui, heading');
+  }
+
+  return Object.entries(sizes).reduce((result, [variant, config]) => {
+    // Validate config
+    if (!config || typeof config !== 'object') {
+      throw new Error(
+        `Invalid size config for "${variant}": must be an object`
+      );
+    }
+
+    if (typeof config.size !== 'number') {
+      throw new Error(
+        `Invalid size for "${category}-${variant}": must be a number`
+      );
+    }
+
+    if (
+      config.lineHeight !== undefined &&
+      typeof config.lineHeight !== 'number'
+    ) {
+      throw new Error(
+        `Invalid lineHeight for "${category}-${variant}": must be a number`
+      );
+    }
+
+    const { size, lineHeight = 1.5 } = config;
+
+    result[`${category}-${variant}`] = [
+      `calc(${size}px * var(--scale-text-${category}))`,
+      { lineHeight }
+    ];
+
+    return result;
+  }, {});
+}
+
+/**
+ * Generates border radius styles with UI scaling
+ *
+ * @param {{[key: string]: string | {size: number}}} sizes
+ *   Set of radius sizes to generate, either as:
+ *   - Object with size property (e.g., { size: 10 })
+ *   - Direct string value (e.g., '0px', '9999px')
+ *
+ * @returns {Object.<string, string>}
+ *   Generated border radius styles in Tailwind format
+ *
+ * @throws {Error} If a value has an invalid type
+ *
+ * @example
+ * const RADIUS_SIZES = {
+ *   none: '0px',
+ *   sm: { size: 10 },
+ *   md: { size: 15 },
+ *   full: '9999px'
+ * };
+ *
+ * generateBorderRadiusStyles(RADIUS_SIZES)
+ * // Returns:
+ * // {
+ * //   'none': '0px',
+ * //   'sm': 'calc(10px * var(--scale-ui))',
+ * //   'md': 'calc(15px * var(--scale-ui))',
+ * //   'full': '9999px'
+ * // }
+ */
+export function generateBorderRadiusStyles(sizes) {
+  if (!sizes || typeof sizes !== 'object') {
+    throw new Error('sizes must be an object');
+  }
+
+  return Object.entries(sizes).reduce((result, [variant, value]) => {
+    if (typeof value === 'object' && value !== null) {
+      // Handle {size: 10} format
+      if (typeof value.size !== 'number') {
+        throw new Error(
+          `Invalid radius size for "${variant}": size must be a number`
+        );
+      }
+      result[variant] = `calc(${value.size}px * var(--scale-ui))`;
+    } else if (typeof value === 'string') {
+      // Handle direct strings (like '0px' or '9999px')
+      result[variant] = value;
+    } else {
+      throw new Error(
+        `Invalid radius value for "${variant}": ` +
+          `must be an object with size property or a string`
+      );
+    }
+    return result;
+  }, {});
+}
+
+/**
+ * Generates width styles for various CSS properties with UI scaling and explicit naming
+ *
+ * @param {{[key: string]: {size: number}}} sizes
+ *   Set of width sizes to generate
+ *
+ * @param {string} [prefix='width']
+ *   Prefix to add before each variant name (default: 'width')
+ *
+ * @param {string} scaleVar
+ *   CSS variable to use for scaling (default: '--scale-ui')
+ *
+ * @returns {{[key: string]: string}}
+ *   Generated width styles in Tailwind format
+ *
+ * @throws {Error} If a size has an invalid type
+ *
+ * @example
+ * const WIDTH_SIZES = {
+ *   thin: { size: 1 },
+ *   normal: { size: 2 },
+ *   thick: { size: 4 }
+ * };
+ *
+ * generateWidthStyles(WIDTH_SIZES, 'width')
+ * // Returns:
+ * // {
+ * //   'width-thin': 'calc(1px * var(--scale-ui))',
+ * //   'width-normal': 'calc(2px * var(--scale-ui))',
+ * //   'width-thick': 'calc(4px * var(--scale-ui))'
+ * // }
+ */
+export function generateWidthStyles(
+  sizes,
+  prefix = 'width',
+  scaleVar = '--scale-ui'
+) {
+  if (!sizes || typeof sizes !== 'object') {
+    throw new Error('sizes must be an object');
+  }
+
+  return Object.entries(sizes).reduce((result, [variant, value]) => {
+    if (typeof value === 'object' && value !== null) {
+      if (typeof value.size !== 'number') {
+        throw new Error(
+          `Invalid width size for "${variant}": size must be a number`
+        );
+      }
+
+      result[`${prefix}${prefix.length ? '-' : ''}${variant}`] =
+        `calc(${value.size}px * var(${scaleVar}))`;
+    } else {
+      throw new Error(
+        `Invalid width value for "${variant}": ` +
+          `must be an object with size property`
+      );
+    }
+    return result;
+  }, {});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.99",
+	"version": "0.1.1",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -20,19 +20,19 @@
 	],
 	"scripts": {
 		"dev": "vite dev",
-		"build": "cross-env vite build && npm run package",
+		"build": "vite build && npm run package",
 		"preview": "vite preview",
-		"package": "cross-env svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "cross-env npm run package",
-		"publish:npm": "cross-env npm version patch && npm publish --access public && git push",
-		"check": "cross-env svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "cross-env svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"publish:npm": "npm version patch && npm publish --access public && git push",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "cross-env prettier --check . && eslint .",
+		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
-		"test": "cross-env npm run test:unit -- --run && npm run test:e2e",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
 		"test:e2e": "playwright test",
-		"upgrade:all": "cross-env ncu -u && pnpm install"
+		"upgrade:all": "ncu -u && pnpm install"
 	},
 	"files": [
 		"dist",
@@ -73,7 +73,6 @@
 		"@tailwindcss/typography": "^0.5.16",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"cross-env": "^7.0.3",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",

package/dist/components/buttons/plain-button/PlainButton.svelte

@@ -1,37 +0,0 @@
-<script>
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   variant?: string,
-   *   classes?: string,
-   *   role?: 'primary' | 'secondary',
-   *   children: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  const {
-    // Style
-    base,
-    bg,
-    variant,
-    classes,
-
-    role = 'primary',
-
-    // Snippets
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<button
-  data-button="plain-button"
-  type="button"
-  class="{base} {bg} {variant} {classes} role-{role}"
-  {...attrs}
->
-  <p class="p">{@render children()}</p>
-</button>

package/dist/components/buttons/plain-button/PlainButton.svelte.d.ts

@@ -1,10 +0,0 @@
-export default PlainButton;
-declare const PlainButton: import("svelte").Component<{
-    [key: string]: any;
-    base?: string;
-    bg?: string;
-    variant?: string;
-    classes?: string;
-    role?: "primary" | "secondary";
-    children: import("svelte").Snippet;
-}, {}, "">;

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

@@ -1,56 +0,0 @@
-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;
-};
-export const strokeWidth: {
-    '1p': string;
-    '2p': string;
-    '4p': string;
-    '6p': string;
-    '8p': string;
-};

package/dist/config/tailwind.extend.js

@@ -1,64 +0,0 @@
-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'
-};
-
-export const strokeWidth = {
-  '1p': '0.0625rem',
-  '2p': '0.125rem',
-  '4p': '0.250rem',
-  '6p': '0.375rem',
-  '8p': '0.5rem'
-};

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

@@ -1,73 +0,0 @@
-
-@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;
-    }
-  }*/
-}