@lumx/core 3.20.1-alpha.26 → 3.20.1-alpha.28

package/js/utils/className/getBasicClass.js

@@ -1,5 +1,4 @@
-import isBoolean from 'lodash/isBoolean';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from '../string/kebabCase.js';
 
 /**
  * Get the basic CSS class for the given type.
@@ -14,7 +13,7 @@ function getBasicClass({
   type,
   value
 }) {
-  if (isBoolean(value)) {
+  if (typeof value === 'boolean') {
     if (!value) {
       // False value should not return a class.
       return '';

package/js/utils/className/getBasicClass.test.js

@@ -1,6 +1,5 @@
 import { getBasicClass } from './getBasicClass.js';
-import 'lodash/isBoolean';
-import 'lodash/kebabCase';
+import '../string/kebabCase.js';
 
 describe(getBasicClass, () => {
   it('should return correct basic CSS class for different types and values', () => {

package/js/utils/className/getBasicClass.ts

@@ -1,5 +1,4 @@
-import isBoolean from 'lodash/isBoolean';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from '../string/kebabCase';
 
 /**
  * Get the basic CSS class for the given type.
@@ -18,7 +17,7 @@ export function getBasicClass({
     type: string;
     value: string | number | boolean | undefined;
 }): string {
-    if (isBoolean(value)) {
+    if (typeof value === 'boolean') {
         if (!value) {
             // False value should not return a class.
             return '';

package/js/utils/className/getRootClassName.js

@@ -1,5 +1,5 @@
-import kebabCase from 'lodash/kebabCase';
 import { CSS_PREFIX } from '../../constants/index.js';
+import { kebabCase } from '../string/kebabCase.js';
 import '../../constants/keycodes.js';
 
 // See https://regex101.com/r/YjS1uI/3

package/js/utils/className/getRootClassName.test.js

@@ -1,7 +1,7 @@
 import { getRootClassName } from './getRootClassName.js';
-import 'lodash/kebabCase';
 import '../../constants/index.js';
 import '../../constants/keycodes.js';
+import '../string/kebabCase.js';
 
 describe(getRootClassName, () => {
   it('should transform the component name into a lumx class', () => {

package/js/utils/className/getRootClassName.ts

@@ -1,6 +1,5 @@
-import kebabCase from 'lodash/kebabCase';
-
 import { CSS_PREFIX } from '../../constants';
+import { kebabCase } from '../string/kebabCase';
 
 // See https://regex101.com/r/YjS1uI/3
 const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;

package/js/utils/className/handleBasicClasses.js

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
-import isBoolean from 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '@lumx/core/js/utils/collection/isEmpty';
 import { getBasicClass } from './getBasicClass.js';
-import 'lodash/kebabCase';
+import '../string/kebabCase.js';
 
 /**
  * Enhance isEmpty method to also works with numbers.
@@ -39,7 +38,7 @@ function handleBasicClasses({
         prefix,
         type: prop,
         value: props[prop]
-      })] = isBoolean(props[prop]) ? props[prop] : !_isEmpty(props[prop]);
+      })] = typeof props[prop] === 'boolean' ? props[prop] : !_isEmpty(props[prop]);
     });
   }
   return classNames(prefix, otherClasses);

package/js/utils/className/handleBasicClasses.test.js

@@ -1,9 +1,8 @@
 import { handleBasicClasses } from './handleBasicClasses.js';
 import 'classnames';
-import 'lodash/isBoolean';
-import 'lodash/isEmpty';
+import '@lumx/core/js/utils/collection/isEmpty';
 import './getBasicClass.js';
-import 'lodash/kebabCase';
+import '../string/kebabCase.js';
 
 describe(handleBasicClasses, () => {
   it('should return correct combined CSS classes based on props', () => {

package/js/utils/className/handleBasicClasses.ts

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 
-import isBoolean from 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '@lumx/core/js/utils/collection/isEmpty';
 
 import { getBasicClass } from './getBasicClass';
 
@@ -34,9 +33,8 @@ export function handleBasicClasses({ prefix, ...props }: { prefix: string; [prop
     const otherClasses: any = {};
     if (!isEmpty(props)) {
         Object.keys(props).forEach((prop) => {
-            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])
-                ? props[prop]
-                : !_isEmpty(props[prop]);
+            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] =
+                typeof props[prop] === 'boolean' ? props[prop] : !_isEmpty(props[prop]);
         });
     }
 

package/js/utils/className/index.js

@@ -5,8 +5,7 @@ export { getTypographyClassName } from './getTypographyClassName.js';
 export { fontColorClass } from './fontColorClass.js';
 export { resolveColorWithVariants } from './resolveColorWithVariants.js';
 import 'classnames';
-import 'lodash/isBoolean';
-import 'lodash/isEmpty';
-import 'lodash/kebabCase';
+import '@lumx/core/js/utils/collection/isEmpty';
+import '../string/kebabCase.js';
 import '../../constants/index.js';
 import '../../constants/keycodes.js';

package/js/utils/collection/castArray.js

@@ -0,0 +1,4 @@
+/** Cast a value into an array if needed */
+const castArray = arrayOrElement => Array.isArray(arrayOrElement) ? arrayOrElement : [arrayOrElement];
+
+export { castArray };

package/js/utils/collection/castArray.test.js

@@ -0,0 +1,15 @@
+import { castArray } from '@lumx/core/js/utils/collection/castArray';
+
+describe(castArray, () => {
+  it('should keep existing array', () => {
+    const input = [1, 2];
+    const output = castArray(input);
+    expect(output).toEqual([1, 2]);
+    expect(output).toBe(input);
+  });
+  it('should cast item to array', () => {
+    const input = 1;
+    const output = castArray(input);
+    expect(output).toEqual([1]);
+  });
+});

package/js/utils/collection/castArray.test.ts

@@ -0,0 +1,15 @@
+import { castArray } from '@lumx/core/js/utils/collection/castArray';
+
+describe(castArray, () => {
+    it('should keep existing array', () => {
+        const input = [1, 2];
+        const output = castArray(input);
+        expect(output).toEqual([1, 2]);
+        expect(output).toBe(input);
+    });
+    it('should cast item to array', () => {
+        const input = 1;
+        const output = castArray(input);
+        expect(output).toEqual([1]);
+    });
+});

package/js/utils/collection/castArray.ts

@@ -0,0 +1,3 @@
+/** Cast a value into an array if needed */
+export const castArray = <T>(arrayOrElement: T[] | T) =>
+    Array.isArray(arrayOrElement) ? arrayOrElement : [arrayOrElement];

package/js/utils/collection/chunk.js

@@ -0,0 +1,8 @@
+/** Chunk array in slices of given size */
+function chunk(input, size) {
+  return input.reduce((arr, item, idx) => {
+    return idx % size === 0 ? [...arr, [item]] : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
+  }, []);
+}
+
+export { chunk };

package/js/utils/collection/chunk.test.js

@@ -0,0 +1,13 @@
+import { chunk } from '@lumx/core/js/utils/collection/chunk';
+
+describe(chunk, () => {
+  it('should do nothing on empty array', () => {
+    expect(chunk([], 2)).toEqual([]);
+  });
+  it('should work with size larger than input array', () => {
+    expect(chunk([1, 2], 4)).toEqual([[1, 2]]);
+  });
+  it('should chunk array with size not perfectly dividing the array length', () => {
+    expect(chunk([1, 2, 3, 4, 5], 2)).toEqual([[1, 2], [3, 4], [5]]);
+  });
+});

package/js/utils/collection/chunk.test.ts

@@ -0,0 +1,15 @@
+import { chunk } from '@lumx/core/js/utils/collection/chunk';
+
+describe(chunk, () => {
+    it('should do nothing on empty array', () => {
+        expect(chunk([], 2)).toEqual([]);
+    });
+
+    it('should work with size larger than input array', () => {
+        expect(chunk([1, 2], 4)).toEqual([[1, 2]]);
+    });
+
+    it('should chunk array with size not perfectly dividing the array length', () => {
+        expect(chunk([1, 2, 3, 4, 5], 2)).toEqual([[1, 2], [3, 4], [5]]);
+    });
+});

package/js/utils/collection/chunk.ts

@@ -0,0 +1,6 @@
+/** Chunk array in slices of given size */
+export function chunk<T>(input: Array<T>, size: number): T[][] {
+    return input.reduce((arr, item, idx) => {
+        return idx % size === 0 ? [...arr, [item]] : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
+    }, [] as T[][]);
+}

package/js/utils/collection/isEmpty.js

@@ -0,0 +1,4 @@
+/** Check if object or array is empty (true on falsy values) */
+const isEmpty = obj => !obj || Object.entries(obj).length === 0;
+
+export { isEmpty };

package/js/utils/collection/isEmpty.test.js

@@ -0,0 +1,20 @@
+import { isEmpty } from './isEmpty.js';
+
+describe(isEmpty, () => {
+  it('should return true for falsy values', () => {
+    expect(isEmpty(undefined)).toBe(true);
+    expect(isEmpty(null)).toBe(true);
+    expect(isEmpty(0)).toBe(true);
+    expect(isEmpty('')).toBe(true);
+  });
+  it('should return true for empty object or array', () => {
+    expect(isEmpty([])).toBe(true);
+    expect(isEmpty({})).toBe(true);
+  });
+  it('should return false for non empty object or array', () => {
+    expect(isEmpty([''])).toBe(false);
+    expect(isEmpty({
+      foo: false
+    })).toBe(false);
+  });
+});

package/js/utils/collection/isEmpty.test.ts

@@ -0,0 +1,20 @@
+import { isEmpty } from './isEmpty';
+
+describe(isEmpty, () => {
+    it('should return true for falsy values', () => {
+        expect(isEmpty(undefined)).toBe(true);
+        expect(isEmpty(null)).toBe(true);
+        expect(isEmpty(0)).toBe(true);
+        expect(isEmpty('')).toBe(true);
+    });
+
+    it('should return true for empty object or array', () => {
+        expect(isEmpty([])).toBe(true);
+        expect(isEmpty({})).toBe(true);
+    });
+
+    it('should return false for non empty object or array', () => {
+        expect(isEmpty([''])).toBe(false);
+        expect(isEmpty({ foo: false })).toBe(false);
+    });
+});

package/js/utils/collection/isEmpty.ts

@@ -0,0 +1,4 @@
+import type { Falsy } from '../../types';
+
+/** Check if object or array is empty (true on falsy values) */
+export const isEmpty = (obj: {} | Falsy) => !obj || Object.entries(obj).length === 0;

package/js/utils/collection/last.js

@@ -0,0 +1,4 @@
+/** Get last item from array */
+const last = array => array[array.length - 1];
+
+export { last };

package/js/utils/collection/last.ts

@@ -0,0 +1,2 @@
+/** Get last item from array */
+export const last = <T>(array: Array<T>): T | undefined => array[array.length - 1];

package/js/utils/collection/partitionMulti.js

@@ -0,0 +1,28 @@
+/**
+ * Similar to lodash `partition` function but working with multiple predicates.
+ *
+ * @example
+ * const isString = (s) => typeof s === 'string'
+ * const isNumber = (s) => typeof s === 'number'
+ * const [strings, numbers, others] = partitionMulti(['a', 1, 'b', false], [isString, isNumber])
+ * //=> [['a', 'b'], [1], [false]]
+ *
+ * @param  elements array of elements
+ * @param  predicates array of predicates to apply on elements
+ * @return partitioned elements by the given predicates
+ */
+function partitionMulti(elements, predicates) {
+  const others = [];
+  const groups = predicates.map(() => []);
+  for (const element of elements) {
+    const index = predicates.findIndex(predicate => predicate(element));
+    if (index !== -1) {
+      groups[index].push(element);
+    } else {
+      others.push(element);
+    }
+  }
+  return [...groups, others];
+}
+
+export { partitionMulti };

package/js/utils/collection/partitionMulti.test.js

@@ -0,0 +1,26 @@
+import { partitionMulti } from './partitionMulti.js';
+
+describe('partitionMulti', () => {
+  it('should partition with single predicate', () => {
+    const data = [0, 1, 2, 3, 4, 5];
+    const isEven = n => n % 2 === 0;
+    const actual = partitionMulti(data, [isEven]);
+    expect(actual).toEqual([[0, 2, 4], [1, 3, 5]]);
+  });
+  it('should partition on multiple predicates', () => {
+    const data = ['a', 1, 'b', false, true];
+    const isString = s => typeof s === 'string';
+    const isNumber = s => typeof s === 'number';
+    const isNull = s => s === null;
+    const partitions = partitionMulti(data, [isString, isNumber, isNull]);
+    expect(partitions).toEqual([
+    // strings
+    ['a', 'b'],
+    // numbers
+    [1],
+    // nulls
+    [],
+    // others
+    [false, true]]);
+  });
+});

package/js/utils/collection/partitionMulti.test.ts

@@ -0,0 +1,35 @@
+import { partitionMulti } from './partitionMulti';
+
+describe('partitionMulti', () => {
+    it('should partition with single predicate', () => {
+        const data = [0, 1, 2, 3, 4, 5];
+        const isEven = (n: number): boolean => n % 2 === 0;
+
+        const actual = partitionMulti(data, [isEven]);
+
+        expect(actual).toEqual([
+            [0, 2, 4],
+            [1, 3, 5],
+        ]);
+    });
+
+    it('should partition on multiple predicates', () => {
+        type T = string | number | boolean;
+        const data: T[] = ['a', 1, 'b', false, true];
+        const isString = (s: T): boolean => typeof s === 'string';
+        const isNumber = (s: T): boolean => typeof s === 'number';
+        const isNull = (s: T): boolean => s === null;
+
+        const partitions = partitionMulti(data, [isString, isNumber, isNull]);
+        expect(partitions).toEqual([
+            // strings
+            ['a', 'b'],
+            // numbers
+            [1],
+            // nulls
+            [],
+            // others
+            [false, true],
+        ]);
+    });
+});

package/js/utils/collection/partitionMulti.ts

@@ -0,0 +1,29 @@
+import type { Predicate } from '@lumx/core/js/types';
+
+/**
+ * Similar to lodash `partition` function but working with multiple predicates.
+ *
+ * @example
+ * const isString = (s) => typeof s === 'string'
+ * const isNumber = (s) => typeof s === 'number'
+ * const [strings, numbers, others] = partitionMulti(['a', 1, 'b', false], [isString, isNumber])
+ * //=> [['a', 'b'], [1], [false]]
+ *
+ * @param  elements array of elements
+ * @param  predicates array of predicates to apply on elements
+ * @return partitioned elements by the given predicates
+ */
+export function partitionMulti<T>(elements: T[], predicates: Array<Predicate<T>>): T[][] {
+    const others = [] as T[];
+    const groups = predicates.map(() => []) as T[][];
+
+    for (const element of elements) {
+        const index = predicates.findIndex((predicate) => predicate(element));
+        if (index !== -1) {
+            groups[index].push(element);
+        } else {
+            others.push(element);
+        }
+    }
+    return [...groups, others];
+}

package/js/utils/collection/pull.js

@@ -0,0 +1,9 @@
+/** Pull an element from an array (inverse of array.push) */
+const pull = (array, element) => {
+  const index = array.indexOf(element);
+  if (index > -1) {
+    array.splice(index, 1);
+  }
+};
+
+export { pull };

package/js/utils/collection/pull.test.js

@@ -0,0 +1,16 @@
+import { pull } from '@lumx/core/js/utils/collection//pull';
+
+describe(pull, () => {
+  it('should do nothing if element does not exist', () => {
+    const a = [1, 2];
+    pull(a, 0);
+    expect(a).toBe(a);
+    expect(a).toEqual([1, 2]);
+  });
+  it('should pull an element from the array', () => {
+    const a = [1, 2];
+    pull(a, 1);
+    expect(a).toBe(a);
+    expect(a).toEqual([2]);
+  });
+});

package/js/utils/collection/pull.test.ts

@@ -0,0 +1,17 @@
+import { pull } from '@lumx/core/js/utils/collection//pull';
+
+describe(pull, () => {
+    it('should do nothing if element does not exist', () => {
+        const a = [1, 2];
+        pull(a, 0);
+        expect(a).toBe(a);
+        expect(a).toEqual([1, 2]);
+    });
+
+    it('should pull an element from the array', () => {
+        const a = [1, 2];
+        pull(a, 1);
+        expect(a).toBe(a);
+        expect(a).toEqual([2]);
+    });
+});

package/js/utils/collection/pull.ts

@@ -0,0 +1,7 @@
+/** Pull an element from an array (inverse of array.push) */
+export const pull = <T>(array: Array<T>, element: T) => {
+    const index = array.indexOf(element);
+    if (index > -1) {
+        array.splice(index, 1);
+    }
+};

package/js/utils/collection/range.js

@@ -0,0 +1,6 @@
+/** Generate a range of number starting at 0 and ending before the given number */
+const range = end => Array.from({
+  length: end
+}, (_, i) => i);
+
+export { range };

package/js/utils/collection/range.test.js

@@ -0,0 +1,9 @@
+import { range } from './range.js';
+
+describe(range, () => {
+  it('should generate a number range', () => {
+    expect(range(0)).toEqual([]);
+    expect(range(1)).toEqual([0]);
+    expect(range(5)).toEqual([0, 1, 2, 3, 4]);
+  });
+});

package/js/utils/collection/range.test.ts

@@ -0,0 +1,9 @@
+import { range } from './range';
+
+describe(range, () => {
+    it('should generate a number range', () => {
+        expect(range(0)).toEqual([]);
+        expect(range(1)).toEqual([0]);
+        expect(range(5)).toEqual([0, 1, 2, 3, 4]);
+    });
+});

package/js/utils/collection/range.ts

@@ -0,0 +1,2 @@
+/** Generate a range of number starting at 0 and ending before the given number */
+export const range = (end: number) => Array.from({ length: end }, (_, i) => i);

package/js/utils/index.js

@@ -1,4 +1,3 @@
-import noop from 'lodash/noop';
 export { handleBasicClasses } from './className/handleBasicClasses.js';
 export { getBasicClass } from './className/getBasicClass.js';
 export { getRootClassName } from './className/getRootClassName.js';
@@ -6,9 +5,8 @@ export { getTypographyClassName } from './className/getTypographyClassName.js';
 export { fontColorClass } from './className/fontColorClass.js';
 export { resolveColorWithVariants } from './className/resolveColorWithVariants.js';
 import 'classnames';
-import 'lodash/isBoolean';
-import 'lodash/isEmpty';
-import 'lodash/kebabCase';
+import '@lumx/core/js/utils/collection/isEmpty';
+import './string/kebabCase.js';
 import '../constants/index.js';
 import '../constants/keycodes.js';
 
@@ -65,7 +63,7 @@ function onButtonPressed(handler) {
  * @param  handleSwipe Callback function.
  * @return Function to remove listeners.
  */
-function detectSwipe(touchSurface, handleSwipe = noop) {
+function detectSwipe(touchSurface, handleSwipe) {
   let distX;
   let distY;
   let startX;
@@ -113,7 +111,7 @@ function detectSwipe(touchSurface, handleSwipe = noop) {
         direction = distY < 0 ? 'up' : 'down';
       }
     }
-    handleSwipe(direction);
+    handleSwipe?.(direction);
     evt.preventDefault();
   };
   touchSurface.addEventListener('touchstart', onTouchStart, false);
@@ -138,8 +136,8 @@ function isPassiveEventAvailable() {
         supportsPassiveOption = true;
       }
     });
-    window.addEventListener('testPassiveEventSupport', noop, opts);
-    window.removeEventListener('testPassiveEventSupport', noop, opts);
+    window.addEventListener('testPassiveEventSupport', () => {}, opts);
+    window.removeEventListener('testPassiveEventSupport', () => {}, opts);
   } catch (e) {
     // ignored
   }

package/js/utils/index.ts

@@ -1,7 +1,5 @@
 import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 
-import noop from 'lodash/noop';
-
 export * from './className';
 
 type KeyboardEventHandler<E extends KeyboardEvent | ReactKeyboardEvent> = (event: E) => void;
@@ -68,7 +66,7 @@ declare type SwipeDirection = 'none' | 'up' | 'down' | 'left' | 'right';
  * @param  handleSwipe Callback function.
  * @return Function to remove listeners.
  */
-export function detectSwipe(touchSurface: Element, handleSwipe: (direction: SwipeDirection) => void = noop) {
+export function detectSwipe(touchSurface: Element, handleSwipe?: (direction: SwipeDirection) => void) {
     let distX: number;
     let distY: number;
     let startX: number;
@@ -119,7 +117,7 @@ export function detectSwipe(touchSurface: Element, handleSwipe: (direction: Swip
                 direction = distY < 0 ? 'up' : 'down';
             }
         }
-        handleSwipe(direction);
+        handleSwipe?.(direction);
         evt.preventDefault();
     };
 
@@ -146,8 +144,8 @@ function isPassiveEventAvailable() {
                 supportsPassiveOption = true;
             },
         });
-        window.addEventListener('testPassiveEventSupport', noop, opts);
-        window.removeEventListener('testPassiveEventSupport', noop, opts);
+        window.addEventListener('testPassiveEventSupport', () => {}, opts);
+        window.removeEventListener('testPassiveEventSupport', () => {}, opts);
     } catch (e) {
         // ignored
     }

package/js/utils/string/kebabCase.js

@@ -0,0 +1,28 @@
+/**
+ * Converts a string to kebab-case.
+ *
+ * @param str The string to convert
+ * @returns The kebab-cased string
+ *
+ * @example
+ * kebabCase('fooBar') // 'foo-bar'
+ * kebabCase('FooBar') // 'foo-bar'
+ * kebabCase('foo_bar') // 'foo-bar'
+ * kebabCase('foo bar') // 'foo-bar'
+ * kebabCase('FOO_BAR') // 'foo-bar'
+ */
+function kebabCase(str) {
+  return str
+  // Insert a hyphen before any uppercase letter that follows a lowercase letter or number
+  .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+  // Insert a hyphen before any uppercase letter that is followed by a lowercase letter and preceded by an uppercase letter
+  .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+  // Replace spaces and underscores with hyphens
+  .replace(/[\s_]+/g, '-')
+  // Convert to lowercase
+  .toLowerCase()
+  // Remove leading/trailing hyphens
+  .replace(/^-+|-+$/g, '');
+}
+
+export { kebabCase };

package/js/utils/string/kebabCase.test.js

@@ -0,0 +1,41 @@
+import { kebabCase } from '@lumx/core/js/utils/string/kebabCase';
+
+describe(kebabCase, () => {
+  it('should convert camelCase to kebab-case', () => {
+    expect(kebabCase('fooBar')).toBe('foo-bar');
+    expect(kebabCase('fooBarBaz')).toBe('foo-bar-baz');
+  });
+  it('should convert PascalCase to kebab-case', () => {
+    expect(kebabCase('FooBar')).toBe('foo-bar');
+    expect(kebabCase('FooBarBaz')).toBe('foo-bar-baz');
+  });
+  it('should convert snake_case to kebab-case', () => {
+    expect(kebabCase('foo_bar')).toBe('foo-bar');
+    expect(kebabCase('foo_bar_baz')).toBe('foo-bar-baz');
+  });
+  it('should convert spaces to hyphens', () => {
+    expect(kebabCase('foo bar')).toBe('foo-bar');
+    expect(kebabCase('foo bar baz')).toBe('foo-bar-baz');
+  });
+  it('should handle UPPERCASE strings', () => {
+    expect(kebabCase('FOO_BAR')).toBe('foo-bar');
+    expect(kebabCase('FOOBAR')).toBe('foobar');
+  });
+  it('should handle mixed formats', () => {
+    expect(kebabCase('fooBar_baz qux')).toBe('foo-bar-baz-qux');
+  });
+  it('should handle strings that are already kebab-case', () => {
+    expect(kebabCase('foo-bar')).toBe('foo-bar');
+  });
+  it('should handle empty strings', () => {
+    expect(kebabCase('')).toBe('');
+  });
+  it('should handle single words', () => {
+    expect(kebabCase('foo')).toBe('foo');
+    expect(kebabCase('Foo')).toBe('foo');
+  });
+  it('should remove leading and trailing hyphens', () => {
+    expect(kebabCase('_foo_bar_')).toBe('foo-bar');
+    expect(kebabCase(' foo bar ')).toBe('foo-bar');
+  });
+});

package/js/utils/string/kebabCase.test.ts

@@ -0,0 +1,50 @@
+import { kebabCase } from '@lumx/core/js/utils/string/kebabCase';
+
+describe(kebabCase, () => {
+    it('should convert camelCase to kebab-case', () => {
+        expect(kebabCase('fooBar')).toBe('foo-bar');
+        expect(kebabCase('fooBarBaz')).toBe('foo-bar-baz');
+    });
+
+    it('should convert PascalCase to kebab-case', () => {
+        expect(kebabCase('FooBar')).toBe('foo-bar');
+        expect(kebabCase('FooBarBaz')).toBe('foo-bar-baz');
+    });
+
+    it('should convert snake_case to kebab-case', () => {
+        expect(kebabCase('foo_bar')).toBe('foo-bar');
+        expect(kebabCase('foo_bar_baz')).toBe('foo-bar-baz');
+    });
+
+    it('should convert spaces to hyphens', () => {
+        expect(kebabCase('foo bar')).toBe('foo-bar');
+        expect(kebabCase('foo bar baz')).toBe('foo-bar-baz');
+    });
+
+    it('should handle UPPERCASE strings', () => {
+        expect(kebabCase('FOO_BAR')).toBe('foo-bar');
+        expect(kebabCase('FOOBAR')).toBe('foobar');
+    });
+
+    it('should handle mixed formats', () => {
+        expect(kebabCase('fooBar_baz qux')).toBe('foo-bar-baz-qux');
+    });
+
+    it('should handle strings that are already kebab-case', () => {
+        expect(kebabCase('foo-bar')).toBe('foo-bar');
+    });
+
+    it('should handle empty strings', () => {
+        expect(kebabCase('')).toBe('');
+    });
+
+    it('should handle single words', () => {
+        expect(kebabCase('foo')).toBe('foo');
+        expect(kebabCase('Foo')).toBe('foo');
+    });
+
+    it('should remove leading and trailing hyphens', () => {
+        expect(kebabCase('_foo_bar_')).toBe('foo-bar');
+        expect(kebabCase(' foo bar ')).toBe('foo-bar');
+    });
+});

package/js/utils/string/kebabCase.ts

@@ -0,0 +1,28 @@
+/**
+ * Converts a string to kebab-case.
+ *
+ * @param str The string to convert
+ * @returns The kebab-cased string
+ *
+ * @example
+ * kebabCase('fooBar') // 'foo-bar'
+ * kebabCase('FooBar') // 'foo-bar'
+ * kebabCase('foo_bar') // 'foo-bar'
+ * kebabCase('foo bar') // 'foo-bar'
+ * kebabCase('FOO_BAR') // 'foo-bar'
+ */
+export function kebabCase(str: string): string {
+    return (
+        str
+            // Insert a hyphen before any uppercase letter that follows a lowercase letter or number
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            // Insert a hyphen before any uppercase letter that is followed by a lowercase letter and preceded by an uppercase letter
+            .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+            // Replace spaces and underscores with hyphens
+            .replace(/[\s_]+/g, '-')
+            // Convert to lowercase
+            .toLowerCase()
+            // Remove leading/trailing hyphens
+            .replace(/^-+|-+$/g, '')
+    );
+}

package/package.json

@@ -31,25 +31,30 @@
     "scripts": {
         "generate:design-tokens": "yarn node style-dictionary",
         "build": "rollup -c",
+        "test": "vitest run",
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.26",
+    "version": "3.20.1-alpha.28",
     "devDependencies": {
         "@babel/preset-typescript": "^7.26.0",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^19.0.2",
+        "@rollup/plugin-commonjs": "^29.0.0",
         "@rollup/plugin-node-resolve": "16.0.0",
         "@types/react": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "postcss": "^8.5.6",
-        "rollup": "^2.79.1",
+        "rollup": "3.29.5",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.5.0",
         "sass": "^1.54.0",
         "style-dictionary": "^3.9.0",
         "tinycolor2": "^1.4.1",
-        "version-changelog": "^3.1.1"
+        "typescript": "^5.4.3",
+        "version-changelog": "^3.1.1",
+        "vite": "^6.3.5",
+        "vite-tsconfig-paths": "^5.1.4",
+        "vitest": "^3.0.0"
     }
 }