@oscarpalmer/atoms 0.6.0 → 0.7.0

package/dist/css/flex.css

@@ -45,104 +45,104 @@
   gap: 0;
 }
 
-.ac-c {
+.flex-ac-c {
   align-content: center;
 }
-.ac-fe {
+.flex-ac-fe {
   align-content: flex-end;
 }
-.ac-fs {
+.flex-ac-fs {
   align-content: flex-start;
 }
-.ac-s {
+.flex-ac-s {
   align-content: stretch;
 }
 
-.ai-c {
+.flex-ai-c {
   align-items: center;
 }
-.ai-fe {
+.flex-ai-fe {
   align-items: flex-end;
 }
-.ai-fs {
+.flex-ai-fs {
   align-items: flex-start;
 }
-.ai-s {
+.flex-ai-s {
   align-items: stretch;
 }
 
-.as-c {
+.flex-as-c {
   align-self: center;
 }
-.as-fe {
+.flex-as-fe {
   align-self: flex-end;
 }
-.as-fs {
+.flex-as-fs {
   align-self: flex-start;
 }
-.as-s {
+.flex-as-s {
   align-self: stretch;
 }
 
-.ac-sa {
+.flex-ac-sa {
   align-content: space-around;
 }
 
-.ac-sb {
+.flex-ac-sb {
   align-content: space-between;
 }
 
-.ac-se {
+.flex-ac-se {
   align-content: space-evenly;
 }
 
-.jc-c {
+.flex-jc-c {
   justify-content: center;
 }
-.jc-fe {
+.flex-jc-fe {
   justify-content: flex-end;
 }
-.jc-fs {
+.flex-jc-fs {
   justify-content: flex-start;
 }
-.jc-s {
+.flex-jc-s {
   justify-content: stretch;
 }
 
-.ji-c {
+.flex-ji-c {
   justify-items: center;
 }
-.ji-fe {
+.flex-ji-fe {
   justify-items: flex-end;
 }
-.ji-fs {
+.flex-ji-fs {
   justify-items: flex-start;
 }
-.ji-s {
+.flex-ji-s {
   justify-items: stretch;
 }
 
-.js-c {
+.flex-js-c {
   justify-self: center;
 }
-.js-fe {
+.flex-js-fe {
   justify-self: flex-end;
 }
-.js-fs {
+.flex-js-fs {
   justify-self: flex-start;
 }
-.js-s {
+.flex-js-s {
   justify-self: stretch;
 }
 
-.jc-sa {
+.flex-jc-sa {
   justify-content: space-around;
 }
 
-.jc-sb {
+.flex-jc-sb {
   justify-content: space-between;
 }
 
-.jc-se {
+.flex-jc-se {
   justify-content: space-evenly;
 }

package/dist/js/atoms.js

@@ -1,12 +1,105 @@
+// src/js/element.ts
+function findParentElement(origin, selector) {
+  if (origin == null || selector == null) {
+    return;
+  }
+  function matches(element) {
+    return typeof selector === "string" ? element.matches?.(selector) ?? false : typeof selector === "function" ? selector(element) : false;
+  }
+  if (matches(origin)) {
+    return origin;
+  }
+  let parent = origin.parentElement;
+  while (parent != null && !matches(parent)) {
+    if (parent === document.body) {
+      return;
+    }
+    parent = parent.parentElement;
+  }
+  return parent ?? undefined;
+}
+function getElementUnderPointer(all) {
+  const elements = Array.from(document.querySelectorAll(":hover")).filter((element) => {
+    const style = window.getComputedStyle(element);
+    return element.tagName !== "HEAD" && (typeof all === "boolean" && all ? true : style.pointerEvents !== "none" && style.visibility !== "hidden");
+  });
+  return elements[elements.length - 1];
+}
+// src/js/event.ts
+function getPosition(event) {
+  let x;
+  let y;
+  if (event instanceof MouseEvent) {
+    x = event.clientX;
+    y = event.clientY;
+  } else if (event instanceof TouchEvent) {
+    x = event.touches[0]?.clientX;
+    y = event.touches[0]?.clientY;
+  }
+  return typeof x === "number" && typeof y === "number" ? { x, y } : undefined;
+}
+var supportsTouch = (() => {
+  let value = false;
+  try {
+    if ("matchMedia" in window) {
+      const media = matchMedia("(pointer: coarse)");
+      if (typeof media?.matches === "boolean") {
+        value = media.matches;
+      }
+    }
+    if (!value) {
+      value = "ontouchstart" in window || navigator.maxTouchPoints > 0 || (navigator.msMaxTouchPoints ?? 0) > 0;
+    }
+  } catch {
+    value = false;
+  }
+  return value;
+})();
+// src/js/number.ts
+function clampNumber(value, min, max) {
+  return Math.min(Math.max(getNumber(value), getNumber(min)), getNumber(max));
+}
+function getNumber(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "symbol") {
+    return NaN;
+  }
+  let parsed = value?.valueOf?.() ?? value;
+  if (typeof parsed === "object") {
+    parsed = parsed?.toString() ?? parsed;
+  }
+  if (typeof parsed !== "string") {
+    return parsed == null ? NaN : typeof parsed === "number" ? parsed : +parsed;
+  }
+  if (zeroPattern.test(parsed)) {
+    return 0;
+  }
+  const trimmed = parsed.trim();
+  if (trimmed.length === 0) {
+    return NaN;
+  }
+  const isBinary = binaryPattern.test(trimmed);
+  if (isBinary || octalPattern.test(trimmed)) {
+    return parseInt(trimmed.slice(2), isBinary ? 2 : 8);
+  }
+  return +(hexadecimalPattern.test(trimmed) ? trimmed : trimmed.replace(separatorPattern, ""));
+}
+var binaryPattern = /^0b[01]+$/i;
+var hexadecimalPattern = /^0x[0-9a-f]+$/i;
+var octalPattern = /^0o[0-7]+$/i;
+var separatorPattern = /_/g;
+var zeroPattern = /^\s*0+\s*$/;
 // src/js/string.ts
 function createUuid() {
   return uuidTemplate.replace(/[018]/g, (substring) => (substring ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> substring / 4).toString(16));
 }
 function getString(value) {
-  return typeof value === "string" ? value : String(value);
+  return typeof value === "string" ? value : typeof value?.toString === "function" ? value.toString() : String(value);
 }
 function isNullableOrWhitespace(value) {
-  return value === undefined || value === null || getString(value).trim().length === 0;
+  return value == null || getString(value).trim().length === 0;
 }
 var uuidTemplate = "10000000-1000-4000-8000-100000000000";
 // src/js/value.ts
@@ -17,9 +110,6 @@ var _getValue = function(data, key) {
   if (data instanceof Map) {
     return data.get(key);
   }
-  if (data instanceof Set) {
-    return Array.from(data)[key];
-  }
   return data[key];
 };
 var _setValue = function(data, key, value) {
@@ -28,27 +118,10 @@ var _setValue = function(data, key, value) {
   }
   if (data instanceof Map) {
     data.set(key, value);
-  } else if (data instanceof Set) {
-    _setValueInSet(data, key, value);
   } else {
     data[key] = value;
   }
 };
-var _setValueInSet = function(data, key, value) {
-  const index = numberExpression.test(key) ? Number.parseInt(key, 10) : -1;
-  if (index === -1 || index >= data.size) {
-    data.add(value);
-    return;
-  }
-  const array = Array.from(data);
-  array.splice(index, 1, value);
-  data.clear();
-  const { length } = array;
-  let position = Number(length);
-  while (position--) {
-    data.add(array[length - position - 1]);
-  }
-};
 function getValue(data, key) {
   if (typeof data !== "object" || data === null || isNullableOrWhitespace(key)) {
     return;
@@ -58,7 +131,7 @@ function getValue(data, key) {
   let value = data;
   while (position--) {
     value = _getValue(value, parts[position]);
-    if (value === undefined) {
+    if (value == null) {
       break;
     }
   }
@@ -68,7 +141,7 @@ function isArrayOrObject(value) {
   return constructors.has(value?.constructor?.name);
 }
 function isNullable(value) {
-  return value === undefined || value === null;
+  return value == null;
 }
 function isObject(value) {
   return value?.constructor?.name === objectConstructor;
@@ -100,6 +173,7 @@ var objectConstructor = "Object";
 var constructors = new Set(["Array", objectConstructor]);
 var numberExpression = /^\d+$/;
 export {
+  supportsTouch,
   setValue,
   isObject,
   isNullableOrWhitespace,
@@ -107,5 +181,10 @@ export {
   isArrayOrObject,
   getValue,
   getString,
-  createUuid
+  getPosition,
+  getNumber,
+  getElementUnderPointer,
+  findParentElement,
+  createUuid,
+  clampNumber
 };

package/package.json

@@ -5,9 +5,10 @@
 	},
 	"description": "Sweet little atomic goodies…",
 	"devDependencies": {
-		"@biomejs/biome": "^1.4",
+		"@biomejs/biome": "^1.5",
+		"@happy-dom/global-registrator": "^13.3",
 		"bun": "^1.0",
-		"sass": "^1.69",
+		"sass": "^1.70",
 		"typescript": "^5.3"
 	},
 	"exports": {
@@ -17,11 +18,7 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"files": [
-		"dist",
-		"src",
-		"types"
-	],
+	"files": ["dist", "src", "types"],
 	"keywords": [],
 	"license": "MIT",
 	"main": "./dist/js/atoms.js",
@@ -35,12 +32,12 @@
 		"build": "bun run build:css && bun run build:js && bun run types",
 		"build:css": "bunx sass ./src/css:./dist/css --no-source-map",
 		"build:js": "bunx bun build ./src/js/index.ts --outfile ./dist/js/atoms.js",
-		"test": "bun test --coverage",
+		"test": "bun test --preload ./test/_preload.ts --coverage",
 		"types": "bunx tsc -p ./tsconfig.json",
 		"watch:css": "bunx sass ./src/css:./dist/css --no-source-map --watch",
 		"watch:js": "bun build ./src/js/index.ts --outfile ./dist/js/atoms.js --watch"
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.6.0"
-}
+	"version": "0.7.0"
+}

package/src/css/flex.scss

@@ -61,7 +61,7 @@ $types: (a: 'align', j: 'justify');
 
 @each $typeKey, $typeValue in $types {
 	@each $alignmentOriginKey, $alignmentOriginValue in $alignmentOrigins {
-		.#{$typeKey}#{$alignmentOriginKey} {
+		.flex-#{$typeKey}#{$alignmentOriginKey} {
 			@each $alignmentValueKey, $alignmentValueValue in $alignmentValues {
 				&-#{$alignmentValueKey} {
 					#{$typeValue}-#{$alignmentOriginValue}: #{$alignmentValueValue}
@@ -71,7 +71,7 @@ $types: (a: 'align', j: 'justify');
 	}
 
 	@each $justificationValueKey, $justificationValueValue in $justificationValues {
-		.#{$typeKey}c-#{$justificationValueKey} {
+		.flex-#{$typeKey}c-#{$justificationValueKey} {
 			#{$typeValue}-content: #{$justificationValueValue}
 		}
 	}

package/src/js/element.ts

@@ -0,0 +1,58 @@
+/**
+ * - Find the parent element that matches the selector
+ * - Matches may be found by a query string or a callback
+ */
+export function findParentElement(
+	origin: Element,
+	selector: string | ((element: Element) => boolean),
+): Element | undefined {
+	if (origin == null || selector == null) {
+		return undefined;
+	}
+
+	function matches(element: Element): boolean {
+		return typeof selector === 'string'
+			? element.matches?.(selector) ?? false
+			: typeof selector === 'function'
+			  ? selector(element)
+			  : false;
+	}
+
+	if (matches(origin)) {
+		return origin;
+	}
+
+	let parent: Element | null = origin.parentElement;
+
+	while (parent != null && !matches(parent)) {
+		if (parent === document.body) {
+			return undefined;
+		}
+
+		parent = parent.parentElement;
+	}
+
+	return parent ?? undefined;
+}
+
+/**
+ * - Get the most specific element under the pointer
+ * - Ignores elements with `pointer-events: none` and `visibility: hidden`
+ * - If `all` is `true`, all elements under the pointer are returned
+ */
+export function getElementUnderPointer(all?: boolean): Element | undefined {
+	const elements = Array.from(document.querySelectorAll(':hover')).filter(
+		element => {
+			const style = window.getComputedStyle(element);
+
+			return (
+				element.tagName !== 'HEAD' &&
+				(typeof all === 'boolean' && all
+					? true
+					: style.pointerEvents !== 'none' && style.visibility !== 'hidden')
+			);
+		},
+	);
+
+	return elements[elements.length - 1];
+}

package/src/js/event.ts

@@ -0,0 +1,57 @@
+type NavigatorWithMsMaxTouchPoints = Navigator & {
+	msMaxTouchPoints: number;
+};
+
+type Position = {
+	x: number;
+	y: number;
+};
+
+/**
+ * Does the browser support touch events?
+ */
+export const supportsTouch = (() => {
+	let value = false;
+
+	try {
+		if ('matchMedia' in window) {
+			const media = matchMedia('(pointer: coarse)');
+
+			if (typeof media?.matches === 'boolean') {
+				value = media.matches;
+			}
+		}
+
+		if (!value) {
+			value =
+				'ontouchstart' in window ||
+				navigator.maxTouchPoints > 0 ||
+				((navigator as NavigatorWithMsMaxTouchPoints).msMaxTouchPoints ?? 0) >
+					0;
+		}
+	} catch {
+		value = false;
+	}
+
+	return value;
+})();
+
+/**
+ * Get the X- and Y-coordinates from a pointer event
+ */
+export function getPosition(
+	event: MouseEvent | TouchEvent,
+): Position | undefined {
+	let x: number | undefined;
+	let y: number | undefined;
+
+	if (event instanceof MouseEvent) {
+		x = event.clientX;
+		y = event.clientY;
+	} else if (event instanceof TouchEvent) {
+		x = event.touches[0]?.clientX;
+		y = event.touches[0]?.clientY;
+	}
+
+	return typeof x === 'number' && typeof y === 'number' ? {x, y} : undefined;
+}

package/src/js/index.ts

@@ -1,2 +1,5 @@
+export * from './element';
+export * from './event';
+export * from './number';
 export * from './string';
 export * from './value';

package/src/js/number.ts

@@ -0,0 +1,56 @@
+const binaryPattern = /^0b[01]+$/i;
+const hexadecimalPattern = /^0x[0-9a-f]+$/i;
+const octalPattern = /^0o[0-7]+$/i;
+const separatorPattern = /_/g;
+const zeroPattern = /^\s*0+\s*$/;
+
+/**
+ * Clamps a number between a minimum and maximum value
+ */
+export function clampNumber(value: number, min: number, max: number): number {
+	return Math.min(Math.max(getNumber(value), getNumber(min)), getNumber(max));
+}
+
+/**
+ * - Gets the number value from an unknown value
+ * - Returns `NaN` if the value is `undefined`, `null`, or cannot be parsed
+ */
+export function getNumber(value: unknown): number {
+	if (typeof value === 'number') {
+		return value;
+	}
+
+	if (typeof value === 'symbol') {
+		return NaN;
+	}
+
+	let parsed = value?.valueOf?.() ?? value;
+
+	if (typeof parsed === 'object') {
+		parsed = parsed?.toString() ?? parsed;
+	}
+
+	if (typeof parsed !== 'string') {
+		return parsed == null ? NaN : typeof parsed === 'number' ? parsed : +parsed;
+	}
+
+	if (zeroPattern.test(parsed)) {
+		return 0;
+	}
+
+	const trimmed = parsed.trim();
+
+	if (trimmed.length === 0) {
+		return NaN;
+	}
+
+	const isBinary = binaryPattern.test(trimmed);
+
+	if (isBinary || octalPattern.test(trimmed)) {
+		return parseInt(trimmed.slice(2), isBinary ? 2 : 8);
+	}
+
+	return +(hexadecimalPattern.test(trimmed)
+		? trimmed
+		: trimmed.replace(separatorPattern, ''));
+}

package/src/js/string.ts

@@ -16,7 +16,11 @@ export function createUuid(): string {
  * Get the string value from any value
  */
 export function getString(value: unknown): string {
-	return typeof value === 'string' ? value : String(value);
+	return typeof value === 'string'
+		? value
+		: typeof value?.toString === 'function'
+		  ? value.toString()
+		  : String(value);
 }
 
 /**
@@ -25,9 +29,5 @@ export function getString(value: unknown): string {
 export function isNullableOrWhitespace(
 	value: unknown,
 ): value is undefined | null | '' {
-	return (
-		value === undefined ||
-		value === null ||
-		getString(value).trim().length === 0
-	);
+	return value == null || getString(value).trim().length === 0;
 }

package/src/js/value.ts

@@ -22,10 +22,6 @@ function _getValue(data: ValueObject, key: string): unknown {
 		return data.get(key as never);
 	}
 
-	if (data instanceof Set) {
-		return Array.from(data)[key as never];
-	}
-
 	return data[key as never];
 }
 
@@ -39,42 +35,11 @@ function _setValue(data: ValueObject, key: string, value: unknown): void {
 
 	if (data instanceof Map) {
 		data.set(key as never, value);
-	} else if (data instanceof Set) {
-		_setValueInSet(data, key, value);
 	} else {
 		data[key as never] = value as never;
 	}
 }
 
-/**
- * - Internal function to set a value in a `Set`
- * - If key is not a valid index or if it is greater than or equal to the length of the set, we simply append it to the set
- * - If the index is less than the size of the set, we convert the set to an array, splice the value into the array, and then convert the array back to a set
- */
-function _setValueInSet(data: Set<unknown>, key: string, value: unknown): void {
-	const index = numberExpression.test(key) ? Number.parseInt(key, 10) : -1;
-
-	if (index === -1 || index >= data.size) {
-		data.add(value);
-
-		return;
-	}
-
-	const array = Array.from(data);
-
-	array.splice(index, 1, value);
-
-	data.clear();
-
-	const {length} = array;
-
-	let position = Number(length);
-
-	while (position--) {
-		data.add(array[length - position - 1]);
-	}
-}
-
 /**
  * - Get the value from an object using a key path
  * - You can retrieve a nested value by using dot notation, e.g., `foo.bar.baz`
@@ -97,7 +62,7 @@ export function getValue(data: ValueObject, key: Key): unknown {
 	while (position--) {
 		value = _getValue(value, parts[position]) as ValueObject;
 
-		if (value === undefined) {
+		if (value == null) {
 			break;
 		}
 	}
@@ -116,7 +81,7 @@ export function isArrayOrObject(value: unknown): value is ArrayOrObject {
  * Is the value undefined or null?
  */
 export function isNullable(value: unknown): value is undefined | null {
-	return value === undefined || value === null;
+	return value == null;
 }
 
 /**

package/types/element.d.ts

@@ -0,0 +1,11 @@
+/**
+ * - Find the parent element that matches the selector
+ * - Matches may be found by a query string or a callback
+ */
+export declare function findParentElement(origin: Element, selector: string | ((element: Element) => boolean)): Element | undefined;
+/**
+ * - Get the most specific element under the pointer
+ * - Ignores elements with `pointer-events: none` and `visibility: hidden`
+ * - If `all` is `true`, all elements under the pointer are returned
+ */
+export declare function getElementUnderPointer(all?: boolean): Element | undefined;

package/types/event.d.ts

@@ -0,0 +1,13 @@
+type Position = {
+    x: number;
+    y: number;
+};
+/**
+ * Does the browser support touch events?
+ */
+export declare const supportsTouch: boolean;
+/**
+ * Get the X- and Y-coordinates from a pointer event
+ */
+export declare function getPosition(event: MouseEvent | TouchEvent): Position | undefined;
+export {};

package/types/index.d.ts

@@ -1,2 +1,5 @@
+export * from './element';
+export * from './event';
+export * from './number';
 export * from './string';
 export * from './value';

package/types/number.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Clamps a number between a minimum and maximum value
+ */
+export declare function clampNumber(value: number, min: number, max: number): number;
+/**
+ * - Gets the number value from an unknown value
+ * - Returns `NaN` if the value is `undefined`, `null`, or cannot be parsed
+ */
+export declare function getNumber(value: unknown): number;