@oscarpalmer/atoms 0.91.0 → 0.92.0

package/dist/color.cjs

@@ -7,15 +7,51 @@ const number = require('./number.cjs');
 class Color {
   $color = true;
   state;
+  /**
+   * Get the color as a hex-color
+   */
   get hex() {
     return this.state.hex;
   }
+  /**
+   * Set colors from a hex-color
+   */
+  set hex(value) {
+    if (isHexColor(value) && value !== this.state.hex) {
+      const hex = getNormalisedHex(value);
+      const rgb = hexToRgb(hex);
+      this.state.hex = hex;
+      this.state.hsl = rgbToHsl(rgb);
+      this.state.rgb = rgb;
+    }
+  }
+  /**
+   * Get the color as an HSL-color
+   */
   get hsl() {
     return this.state.hsl;
   }
+  set hsl(value) {
+    if (isHSLColor(value)) {
+      const rgb = hslToRgb(value);
+      this.state.hex = rgbToHex(rgb);
+      this.state.hsl = value;
+      this.state.rgb = rgb;
+    }
+  }
+  /**
+   * Get the color as an RGB-color
+   */
   get rgb() {
     return this.state.rgb;
   }
+  set rgb(value) {
+    if (isRGBColor(value)) {
+      this.state.hex = rgbToHex(value);
+      this.state.hsl = rgbToHsl(value);
+      this.state.rgb = value;
+    }
+  }
   constructor(value) {
     this.state = getState(value);
   }
@@ -132,22 +168,28 @@ function isHexColor(value) {
 function isHSLColor(value) {
   return isObject(value, hslKeys);
 }
+function isInRange(value, min, max) {
+  if (typeof value === "number" || typeof value === "string" && numberPattern.test(value)) {
+    const asNumber = Number(value);
+    return asNumber >= min && asNumber <= max;
+  }
+  return false;
+}
 function isRGBColor(value) {
   return isObject(value, rgbKeys);
 }
-function isObject(value, properties) {
-  if (typeof value !== "object" || value === null) {
+function isObject(obj, properties) {
+  if (typeof obj !== "object" || obj === null) {
     return false;
   }
-  const keys = Object.keys(value);
+  const keys = Object.keys(obj);
   const { length } = keys;
   if (length !== properties.size) {
     return false;
   }
   for (let index = 0; index < length; index += 1) {
     const key = keys[index];
-    const val = value[key];
-    if (!properties.has(key) || !(typeof val === "number" || typeof val === "string" && /^\d+$/.test(val))) {
+    if (!properties.has(key) || !validators[key](obj[key])) {
       return false;
     }
   }
@@ -211,7 +253,16 @@ const defaultRgb = {
 };
 const groupedPattern = /^#?([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i;
 const hslKeys = /* @__PURE__ */ new Set(["hue", "lightness", "saturation"]);
+const numberPattern = /^\d+$/;
 const rgbKeys = /* @__PURE__ */ new Set(["blue", "green", "red"]);
+const validators = {
+  blue: (value) => isInRange(value, 0, 255),
+  green: (value) => isInRange(value, 0, 255),
+  hue: (value) => isInRange(value, 0, 360),
+  lightness: (value) => isInRange(value, 0, 100),
+  saturation: (value) => isInRange(value, 0, 100),
+  red: (value) => isInRange(value, 0, 255)
+};
 
 exports.Color = Color;
 exports.getColor = getColor;

package/dist/color.js

@@ -3,15 +3,51 @@ import { clamp } from './number.js';
 class Color {
   $color = true;
   state;
+  /**
+   * Get the color as a hex-color
+   */
   get hex() {
     return this.state.hex;
   }
+  /**
+   * Set colors from a hex-color
+   */
+  set hex(value) {
+    if (isHexColor(value) && value !== this.state.hex) {
+      const hex = getNormalisedHex(value);
+      const rgb = hexToRgb(hex);
+      this.state.hex = hex;
+      this.state.hsl = rgbToHsl(rgb);
+      this.state.rgb = rgb;
+    }
+  }
+  /**
+   * Get the color as an HSL-color
+   */
   get hsl() {
     return this.state.hsl;
   }
+  set hsl(value) {
+    if (isHSLColor(value)) {
+      const rgb = hslToRgb(value);
+      this.state.hex = rgbToHex(rgb);
+      this.state.hsl = value;
+      this.state.rgb = rgb;
+    }
+  }
+  /**
+   * Get the color as an RGB-color
+   */
   get rgb() {
     return this.state.rgb;
   }
+  set rgb(value) {
+    if (isRGBColor(value)) {
+      this.state.hex = rgbToHex(value);
+      this.state.hsl = rgbToHsl(value);
+      this.state.rgb = value;
+    }
+  }
   constructor(value) {
     this.state = getState(value);
   }
@@ -128,22 +164,28 @@ function isHexColor(value) {
 function isHSLColor(value) {
   return isObject(value, hslKeys);
 }
+function isInRange(value, min, max) {
+  if (typeof value === "number" || typeof value === "string" && numberPattern.test(value)) {
+    const asNumber = Number(value);
+    return asNumber >= min && asNumber <= max;
+  }
+  return false;
+}
 function isRGBColor(value) {
   return isObject(value, rgbKeys);
 }
-function isObject(value, properties) {
-  if (typeof value !== "object" || value === null) {
+function isObject(obj, properties) {
+  if (typeof obj !== "object" || obj === null) {
     return false;
   }
-  const keys = Object.keys(value);
+  const keys = Object.keys(obj);
   const { length } = keys;
   if (length !== properties.size) {
     return false;
   }
   for (let index = 0; index < length; index += 1) {
     const key = keys[index];
-    const val = value[key];
-    if (!properties.has(key) || !(typeof val === "number" || typeof val === "string" && /^\d+$/.test(val))) {
+    if (!properties.has(key) || !validators[key](obj[key])) {
       return false;
     }
   }
@@ -207,6 +249,15 @@ const defaultRgb = {
 };
 const groupedPattern = /^#?([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i;
 const hslKeys = /* @__PURE__ */ new Set(["hue", "lightness", "saturation"]);
+const numberPattern = /^\d+$/;
 const rgbKeys = /* @__PURE__ */ new Set(["blue", "green", "red"]);
+const validators = {
+  blue: (value) => isInRange(value, 0, 255),
+  green: (value) => isInRange(value, 0, 255),
+  hue: (value) => isInRange(value, 0, 360),
+  lightness: (value) => isInRange(value, 0, 100),
+  saturation: (value) => isInRange(value, 0, 100),
+  red: (value) => isInRange(value, 0, 255)
+};
 
 export { Color, getColor, getForegroundColor, getHSLColor, getHexColor, getRGBColor, isColor, isHSLColor, isHexColor, isRGBColor };

package/package.json

@@ -208,5 +208,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.cts",
-	"version": "0.91.0"
+	"version": "0.92.0"
 }

package/src/color.ts

@@ -13,6 +13,8 @@ export type RGBColor = {
 	red: number;
 };
 
+type Property = 'blue' | 'green' | 'hue' | 'lightness' | 'red' | 'saturation';
+
 type State = {
 	hex: string;
 	hsl: HSLColor;
@@ -24,18 +26,59 @@ export class Color {
 
 	private readonly state: State;
 
+	/**
+	 * Get the color as a hex-color
+	 */
 	get hex(): string {
 		return this.state.hex;
 	}
 
+	/**
+	 * Set colors from a hex-color
+	 */
+	set hex(value: string) {
+		if (isHexColor(value) && value !== this.state.hex) {
+			const hex = getNormalisedHex(value);
+			const rgb = hexToRgb(hex);
+
+			this.state.hex = hex;
+			this.state.hsl = rgbToHsl(rgb);
+			this.state.rgb = rgb;
+		}
+	}
+
+	/**
+	 * Get the color as an HSL-color
+	 */
 	get hsl(): HSLColor {
 		return this.state.hsl;
 	}
 
+	set hsl(value: HSLColor) {
+		if (isHSLColor(value)) {
+			const rgb = hslToRgb(value);
+
+			this.state.hex = rgbToHex(rgb);
+			this.state.hsl = value;
+			this.state.rgb = rgb;
+		}
+	}
+
+	/**
+	 * Get the color as an RGB-color
+	 */
 	get rgb(): RGBColor {
 		return this.state.rgb;
 	}
 
+	set rgb(value: RGBColor) {
+		if (isRGBColor(value)) {
+			this.state.hex = rgbToHex(value);
+			this.state.hsl = rgbToHsl(value);
+			this.state.rgb = value;
+		}
+	}
+
 	constructor(value: unknown) {
 		this.state = getState(value);
 	}
@@ -238,6 +281,19 @@ export function isHSLColor(value: unknown): value is HSLColor {
 	return isObject(value, hslKeys);
 }
 
+function isInRange(value: unknown, min: number, max: number): boolean {
+	if (
+		typeof value === 'number' ||
+		(typeof value === 'string' && numberPattern.test(value))
+	) {
+		const asNumber = Number(value);
+
+		return asNumber >= min && asNumber <= max;
+	}
+
+	return false;
+}
+
 /**
  * Is the value an RGB-color?
  */
@@ -245,12 +301,15 @@ export function isRGBColor(value: unknown): value is RGBColor {
 	return isObject(value, rgbKeys);
 }
 
-function isObject(value: unknown, properties: Set<string>): boolean {
-	if (typeof value !== 'object' || value === null) {
+/**
+ * Is the value an object with the given properties and value requirements?
+ */
+function isObject(obj: unknown, properties: Set<Property>): boolean {
+	if (typeof obj !== 'object' || obj === null) {
 		return false;
 	}
 
-	const keys = Object.keys(value);
+	const keys = Object.keys(obj);
 	const {length} = keys;
 
 	if (length !== properties.size) {
@@ -259,14 +318,10 @@ function isObject(value: unknown, properties: Set<string>): boolean {
 
 	for (let index = 0; index < length; index += 1) {
 		const key = keys[index];
-		const val = (value as PlainObject)[key];
 
 		if (
-			!properties.has(key) ||
-			!(
-				typeof val === 'number' ||
-				(typeof val === 'string' && /^\d+$/.test(val))
-			)
+			!properties.has(key as never) ||
+			!validators[key as Property]((obj as PlainObject)[key])
 		) {
 			return false;
 		}
@@ -361,5 +416,17 @@ const defaultRgb: RGBColor = {
 
 const groupedPattern = /^#?([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i;
 
-const hslKeys = new Set(['hue', 'lightness', 'saturation']);
-const rgbKeys = new Set(['blue', 'green', 'red']);
+const hslKeys = new Set<Property>(['hue', 'lightness', 'saturation']);
+
+const numberPattern = /^\d+$/;
+
+const rgbKeys = new Set<Property>(['blue', 'green', 'red']);
+
+const validators: Record<Property, (value: unknown) => boolean> = {
+	blue: value => isInRange(value, 0, 255),
+	green: value => isInRange(value, 0, 255),
+	hue: value => isInRange(value, 0, 360),
+	lightness: value => isInRange(value, 0, 100),
+	saturation: value => isInRange(value, 0, 100),
+	red: value => isInRange(value, 0, 255),
+};

package/types/color.d.cts

@@ -13,9 +13,24 @@ export type RGBColor = {
 export declare class Color {
 	private readonly $color;
 	private readonly state;
+	/**
+	 * Get the color as a hex-color
+	 */
 	get hex(): string;
+	/**
+	 * Set colors from a hex-color
+	 */
+	set hex(value: string);
+	/**
+	 * Get the color as an HSL-color
+	 */
 	get hsl(): HSLColor;
+	set hsl(value: HSLColor);
+	/**
+	 * Get the color as an RGB-color
+	 */
 	get rgb(): RGBColor;
+	set rgb(value: RGBColor);
 	constructor(value: unknown);
 }
 /**

package/types/color.d.ts

@@ -11,9 +11,24 @@ export type RGBColor = {
 export declare class Color {
     private readonly $color;
     private readonly state;
+    /**
+     * Get the color as a hex-color
+     */
     get hex(): string;
+    /**
+     * Set colors from a hex-color
+     */
+    set hex(value: string);
+    /**
+     * Get the color as an HSL-color
+     */
     get hsl(): HSLColor;
+    set hsl(value: HSLColor);
+    /**
+     * Get the color as an RGB-color
+     */
     get rgb(): RGBColor;
+    set rgb(value: RGBColor);
     constructor(value: unknown);
 }
 /**

package/types/index.d.cts

@@ -2471,9 +2471,24 @@ export type RGBColor = {
 export declare class Color {
 	private readonly $color;
 	private readonly state;
+	/**
+	 * Get the color as a hex-color
+	 */
 	get hex(): string;
+	/**
+	 * Set colors from a hex-color
+	 */
+	set hex(value: string);
+	/**
+	 * Get the color as an HSL-color
+	 */
 	get hsl(): HSLColor;
+	set hsl(value: HSLColor);
+	/**
+	 * Get the color as an RGB-color
+	 */
 	get rgb(): RGBColor;
+	set rgb(value: RGBColor);
 	constructor(value: unknown);
 }
 /**