umaki 0.10.0 → 0.12.0

package/README.md

@@ -78,15 +78,18 @@ console.log(breakpoint); // e.g. 768 (default) or custom value if set
 
 - [Callback](#callback)
   - [tap](#tap)
-  - [tapAsync](#tapasync)
+  - [tapAsync](#tapasync-promise)
 - [Control](#control)
   - [bgScrollStop](#bgscrollstop)
+  - [copyToClipboard](#copytoclipboard-promise)
   - [pd](#pd)
-  - [scrollToHash](#scrolltohash)
+  - [scrollToHash](#scrolltohash-promise)
   - [videoPlayControl](#videoplaycontrol)
 - [Convert](#convert)
   - [changeDateStringToSpecificFormat](#changedatestringtospecificformat)
+  - [hexToRgb](#hextorgb)
   - [jsonStringToJsonObject](#jsonstringtojsonobject)
+  - [rgbToHex](#rgbtohex)
 - [EventControl](#eventcontrol)
   - [debounce](#debounce)
   - [throttle](#throttle)
@@ -100,6 +103,8 @@ console.log(breakpoint); // e.g. 768 (default) or custom value if set
   - [getOrientation](#getorientation)
   - [getParentList](#getparentlist)
   - [getQueryParams](#getqueryparams)
+  - [getRandomInt](#getrandomint)
+  - [getRelativeTime](#getrelativetime)
   - [getRem](#getrem)
   - [getScrollbarWidth](#getscrollbarwidth)
   - [getSessionStorage](#getsessionstorage)
@@ -111,8 +116,10 @@ console.log(breakpoint); // e.g. 768 (default) or custom value if set
   - [isAfterDateTime](#isafterdatetime)
   - [isBetweenDateTime](#isbetweendatetime)
   - [isExistAllElements](#isexistallelements)
+  - [isInViewport](#isinviewport)
   - [isIpad](#isipad)
   - [isKeyExists](#iskeyexists)
+  - [isOnline](#isonline)
   - [isSafari](#issafari)
   - [isScrollable](#isscrollable)
   - [isTouchSupport](#istouchsupport)
@@ -135,8 +142,8 @@ console.log(breakpoint); // e.g. 768 (default) or custom value if set
 - [Transform](#transform)
   - [wrapTextWithSpans](#wraptextwithspans)
 - [Wait](#wait)
-  - [sleep](#sleep)
-  - [waitForAllMediaLoaded](#waitforallmedialoaded)
+  - [sleep](#sleep-promise)
+  - [waitForAllMediaLoaded](#waitforallmedialoaded-promise)
 - [Security](#security)
   - [sanitizeHtml](#sanitizehtml)
 - [Advanced Usage](#advanced-usage)
@@ -218,6 +225,30 @@ bgScrollStop(false); // scroll start
 
 [View file →](src/libs/control/bg-scroll-stop.ts)
 
+### copyToClipboard (Promise)
+
+A function that copies text to the clipboard using the modern Clipboard API.
+
+```ts
+import { copyToClipboard } from "umaki";
+
+// Basic usage
+const success = await copyToClipboard("Hello, World!");
+if (success) {
+  console.log("Copied to clipboard!");
+} else {
+  console.log("Failed to copy");
+}
+
+// Use in click handler
+button.addEventListener("click", async () => {
+  const copied = await copyToClipboard(textToCopy);
+  showToast(copied ? "Copied!" : "Copy failed");
+});
+```
+
+[View file →](src/libs/control/copy-to-clipboard.ts)
+
 ### pd
 
 A function that prevents the default event behavior.
@@ -303,6 +334,21 @@ Note: This function focuses on timezone handling rather than locale-specific for
 
 [View file →](src/libs/convert/change-date-string-to-specific-format.ts)
 
+### hexToRgb
+
+A function that converts a hex color string to an RGB color object. Supports `#RGB` / `#RRGGBB` and the same forms without the leading `#`. Returns `undefined` for invalid input.
+
+```ts
+import { hexToRgb } from "umaki";
+
+hexToRgb("#ff0000"); // { r: 255, g: 0, b: 0 }
+hexToRgb("#fff"); // { r: 255, g: 255, b: 255 }
+hexToRgb("abc"); // { r: 170, g: 187, b: 204 }
+hexToRgb("#invalid"); // undefined
+```
+
+[View file →](src/libs/convert/hex-to-rgb.ts)
+
 ### jsonStringToJsonObject
 
 A function that converts a JSON string to a JSON object.
@@ -317,6 +363,22 @@ console.log(jsonObject); // { name: 'John', age: 30 }
 
 [View file →](src/libs/convert/json-string-to-json-object.ts)
 
+### rgbToHex
+
+A function that converts RGB color components to a 6-digit hex color string with leading `#`. Each component is rounded to the nearest integer and clamped to `[0, 255]`. Non-finite values (`NaN`, `Infinity`, `-Infinity`) are treated as `0`.
+
+```ts
+import { rgbToHex } from "umaki";
+
+rgbToHex(255, 0, 0); // '#ff0000'
+rgbToHex(170, 187, 204); // '#aabbcc'
+rgbToHex(1, 2, 3); // '#010203'
+rgbToHex(300, -10, 128.5); // '#ff0081' (clamped & rounded)
+rgbToHex(NaN, NaN, NaN); // '#000000'
+```
+
+[View file →](src/libs/convert/rgb-to-hex.ts)
+
 ## EventControl
 
 ### debounce
@@ -497,6 +559,53 @@ const customParamWithOptions = getQueryParams("id", {
 
 [View file →](src/libs/get/get-query-params.ts)
 
+### getRandomInt
+
+A function that returns a random integer between min (inclusive) and max (inclusive).
+
+```ts
+import { getRandomInt } from "umaki";
+
+// Basic usage
+const random = getRandomInt(1, 10);
+console.log(random); // Random integer from 1 to 10
+
+// Use for array index
+const items = ["apple", "banana", "orange"];
+const randomItem = items[getRandomInt(0, items.length - 1)];
+
+// Generate random delay
+const delay = getRandomInt(100, 500);
+await sleep(delay / 1000);
+```
+
+[View file →](src/libs/get/get-random-int.ts)
+
+### getRelativeTime
+
+A function that returns a human-readable relative time string (e.g., "3 minutes ago", "2 days ago") using the Intl.RelativeTimeFormat API.
+
+```ts
+import { getRelativeTime } from "umaki";
+
+// Basic usage (Japanese locale by default)
+const pastDate = new Date(Date.now() - 5 * 60 * 1000);
+console.log(getRelativeTime(pastDate)); // "5 分前"
+
+// English locale
+console.log(getRelativeTime(pastDate, "en")); // "5 minutes ago"
+
+// Future dates
+const futureDate = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000);
+console.log(getRelativeTime(futureDate)); // "2 日後"
+
+// With timestamp or ISO string
+console.log(getRelativeTime(1702800000000, "en")); // relative to now
+console.log(getRelativeTime("2024-01-15T12:00:00Z", "en"));
+```
+
+[View file →](src/libs/get/get-relative-time.ts)
+
 ### getRem
 
 A function that converts a pixel value to rem units.
@@ -650,6 +759,31 @@ console.log(result); // true or false
 
 [View file →](src/libs/is/is-exist-all-elements.ts)
 
+### isInViewport
+
+A function that checks if an element is currently visible within the viewport.
+
+```ts
+import { isInViewport } from "umaki";
+
+const element = document.getElementById("target");
+
+// Check if any part of the element is visible
+const isVisible = isInViewport(element);
+console.log(isVisible); // true or false
+
+// Check if the entire element is visible
+const isFullyVisible = isInViewport(element, { threshold: 1 });
+
+// Check if at least 50% of the element is visible
+const isHalfVisible = isInViewport(element, { threshold: 0.5 });
+
+// With expanded viewport bounds (trigger 100px before element enters viewport)
+const isNearViewport = isInViewport(element, { rootMargin: "100px" });
+```
+
+[View file →](src/libs/is/is-in-viewport.ts)
+
 ### isIpad
 
 A function that checks if the device is an iPad.
@@ -677,6 +811,32 @@ console.log(result); // true or false
 
 [View file →](src/libs/is/is-key-exists.ts)
 
+### isOnline
+
+A function that checks if the browser is currently online using the Navigator.onLine API.
+
+```ts
+import { isOnline } from "umaki";
+
+// Basic usage
+if (isOnline()) {
+  // Perform network request
+  fetchData();
+} else {
+  // Show offline message
+  showOfflineMessage();
+}
+
+// Use with event listeners for online/offline detection
+window.addEventListener("online", () => {
+  if (isOnline()) {
+    console.log("Back online!");
+  }
+});
+```
+
+[View file →](src/libs/is/is-online.ts)
+
 ### isSafari
 
 A function that checks if the browser is Safari.
@@ -1161,7 +1321,7 @@ import { getUaData, sanitizeHtml } from "umaki";
 | `umaki/callback` | Callback utilities (tap, tapAsync) |
 | `umaki/config` | Configuration (setConfig, getConfig) |
 | `umaki/control` | Scroll control, video playback, etc. |
-| `umaki/convert` | Data conversion (dates, JSON) |
+| `umaki/convert` | Data conversion (dates, JSON, colors) |
 | `umaki/eventControl` | debounce, throttle |
 | `umaki/get` | Value retrieval (DOM, UA, etc.) |
 | `umaki/is` | Boolean checks (device detection, etc.) |

package/dist/index.cjs.js

@@ -11,7 +11,9 @@ const pd = require("./libs/control/pd.cjs.js");
 const scrollToHash = require("./libs/control/scroll-to-hash.cjs.js");
 const videoPlayControl = require("./libs/control/video-play-control.cjs.js");
 const changeDateStringToSpecificFormat = require("./libs/convert/change-date-string-to-specific-format.cjs.js");
+const hexToRgb = require("./libs/convert/hex-to-rgb.cjs.js");
 const jsonStringToJsonObject = require("./libs/convert/json-string-to-json-object.cjs.js");
+const rgbToHex = require("./libs/convert/rgb-to-hex.cjs.js");
 const debounce = require("./libs/eventControl/debounce.cjs.js");
 const throttle = require("./libs/eventControl/throttle.cjs.js");
 const getAspectRatio = require("./libs/get/get-aspect-ratio.cjs.js");
@@ -62,7 +64,6 @@ const waitForAllMediaLoaded = require("./libs/wait/wait-for-all-media-loaded.cjs
 exports.tap = tap.tap;
 exports.tapAsync = tapAsync.tapAsync;
 exports.defaultConfig = defaultConfig.defaultConfig;
-exports.currentConfig = getConfig.currentConfig;
 exports.getConfig = getConfig.getConfig;
 exports.getConfigValue = getConfig.getConfigValue;
 exports.setConfig = setConfig.setConfig;
@@ -72,7 +73,9 @@ exports.pd = pd.pd;
 exports.scrollToHash = scrollToHash.scrollToHash;
 exports.videoPlayControl = videoPlayControl.videoPlayControl;
 exports.changeDateStringToSpecificFormat = changeDateStringToSpecificFormat.changeDateStringToSpecificFormat;
+exports.hexToRgb = hexToRgb.hexToRgb;
 exports.jsonStringToJsonObject = jsonStringToJsonObject.jsonStringToJsonObject;
+exports.rgbToHex = rgbToHex.rgbToHex;
 exports.debounce = debounce.debounce;
 exports.throttle = throttle.throttle;
 exports.getAspectRatio = getAspectRatio.getAspectRatio;
@@ -109,6 +112,7 @@ exports.removeAttribute = removeAttribute.removeAttribute;
 exports.removeSessionStorage = removeSessionStorage.removeSessionStorage;
 exports.removeStylePropertyValue = removeStylePropertyValue.removeStylePropertyValue;
 exports.htmlSanitize = htmlSanitize.htmlSanitize;
+exports.sanitizeHtml = htmlSanitize.sanitizeHtml;
 exports.set100vh = set100vh.set100vh;
 exports.set100vw = set100vw.set100vw;
 exports.setAttribute = setAttribute.setAttribute;

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { tap } from "./libs/callback/tap.es.js";
 import { tapAsync } from "./libs/callback/tap-async.es.js";
 import { defaultConfig } from "./libs/config/default-config.es.js";
-import { currentConfig, getConfig, getConfigValue } from "./libs/config/get-config.es.js";
+import { getConfig, getConfigValue } from "./libs/config/get-config.es.js";
 import { setConfig } from "./libs/config/set-config.es.js";
 import { bgScrollStop } from "./libs/control/bg-scroll-stop.es.js";
 import { copyToClipboard } from "./libs/control/copy-to-clipboard.es.js";
@@ -9,7 +9,9 @@ import { pd } from "./libs/control/pd.es.js";
 import { scrollToHash } from "./libs/control/scroll-to-hash.es.js";
 import { videoPlayControl } from "./libs/control/video-play-control.es.js";
 import { changeDateStringToSpecificFormat } from "./libs/convert/change-date-string-to-specific-format.es.js";
+import { hexToRgb } from "./libs/convert/hex-to-rgb.es.js";
 import { jsonStringToJsonObject } from "./libs/convert/json-string-to-json-object.es.js";
+import { rgbToHex } from "./libs/convert/rgb-to-hex.es.js";
 import { debounce } from "./libs/eventControl/debounce.es.js";
 import { throttle } from "./libs/eventControl/throttle.es.js";
 import { getAspectRatio } from "./libs/get/get-aspect-ratio.es.js";
@@ -45,7 +47,7 @@ import { removeAllHtmlTags } from "./libs/remove/remove-all-html-tags.es.js";
 import { removeAttribute } from "./libs/remove/remove-attribute.es.js";
 import { removeSessionStorage } from "./libs/remove/remove-session-storage.es.js";
 import { removeStylePropertyValue } from "./libs/remove/remove-style-property-value.es.js";
-import { htmlSanitize } from "./libs/security/html-sanitize.es.js";
+import { htmlSanitize, sanitizeHtml } from "./libs/security/html-sanitize.es.js";
 import { set100vh } from "./libs/set/set-100vh.es.js";
 import { set100vw } from "./libs/set/set-100vw.es.js";
 import { setAttribute } from "./libs/set/set-attribute.es.js";
@@ -62,7 +64,6 @@ export {
   changeDateStringToSpecificFormat,
   checkDeviceSize,
   copyToClipboard,
-  currentConfig,
   debounce,
   defaultConfig,
   getAspectRatio,
@@ -85,6 +86,7 @@ export {
   getStylePropertyValue,
   getStylePropertyValueToNumber,
   getUaData,
+  hexToRgb,
   htmlSanitize,
   isAfterDateTime,
   isBetweenDateTime,
@@ -102,6 +104,8 @@ export {
   removeAttribute,
   removeSessionStorage,
   removeStylePropertyValue,
+  rgbToHex,
+  sanitizeHtml,
   scrollToHash,
   set100vh,
   set100vw,

package/dist/libs/config/_internal.cjs.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultConfig = require("./default-config.cjs.js");
+const currentConfig = { ...defaultConfig.defaultConfig };
+exports.currentConfig = currentConfig;

package/dist/libs/config/_internal.d.ts

@@ -0,0 +1,6 @@
+import { UmakiConfig } from './types';
+/**
+ * Internal module for shared configuration state.
+ * This module should NOT be exported publicly.
+ */
+export declare const currentConfig: UmakiConfig;

package/dist/libs/config/_internal.es.js

@@ -0,0 +1,5 @@
+import { defaultConfig } from "./default-config.es.js";
+const currentConfig = { ...defaultConfig };
+export {
+  currentConfig
+};

package/dist/libs/config/get-config.cjs.js

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const defaultConfig = require("./default-config.cjs.js");
-const currentConfig = { ...defaultConfig.defaultConfig };
+const _internal = require("./_internal.cjs.js");
 const getConfig = () => {
-  return { ...currentConfig };
+  return { ..._internal.currentConfig };
 };
 const getConfigValue = (key) => {
-  return currentConfig[key];
+  return _internal.currentConfig[key];
 };
-exports.currentConfig = currentConfig;
 exports.getConfig = getConfig;
 exports.getConfigValue = getConfigValue;

package/dist/libs/config/get-config.d.ts

@@ -1,5 +1,4 @@
 import { UmakiConfig } from './types';
-declare const currentConfig: UmakiConfig;
 /**
  * Get the current configuration
  * @returns The current configuration object
@@ -11,4 +10,3 @@ export declare const getConfig: () => UmakiConfig;
  * @returns The value for the specified key, or undefined if the key doesn't exist
  */
 export declare const getConfigValue: <K extends keyof UmakiConfig>(key: K) => UmakiConfig[K];
-export { currentConfig };

package/dist/libs/config/get-config.es.js

@@ -1,5 +1,4 @@
-import { defaultConfig } from "./default-config.es.js";
-const currentConfig = { ...defaultConfig };
+import { currentConfig } from "./_internal.es.js";
 const getConfig = () => {
   return { ...currentConfig };
 };
@@ -7,7 +6,6 @@ const getConfigValue = (key) => {
   return currentConfig[key];
 };
 export {
-  currentConfig,
   getConfig,
   getConfigValue
 };

package/dist/libs/config/index.cjs.js

@@ -4,7 +4,6 @@ const defaultConfig = require("./default-config.cjs.js");
 const getConfig = require("./get-config.cjs.js");
 const setConfig = require("./set-config.cjs.js");
 exports.defaultConfig = defaultConfig.defaultConfig;
-exports.currentConfig = getConfig.currentConfig;
 exports.getConfig = getConfig.getConfig;
 exports.getConfigValue = getConfig.getConfigValue;
 exports.setConfig = setConfig.setConfig;

package/dist/libs/config/index.es.js

@@ -1,8 +1,7 @@
 import { defaultConfig } from "./default-config.es.js";
-import { currentConfig, getConfig, getConfigValue } from "./get-config.es.js";
+import { getConfig, getConfigValue } from "./get-config.es.js";
 import { setConfig } from "./set-config.es.js";
 export {
-  currentConfig,
   defaultConfig,
   getConfig,
   getConfigValue,

package/dist/libs/config/set-config.cjs.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const getConfig = require("./get-config.cjs.js");
+const _internal = require("./_internal.cjs.js");
 const setConfig = (config) => {
-  Object.assign(getConfig.currentConfig, config);
-  return { ...getConfig.currentConfig };
+  Object.assign(_internal.currentConfig, config);
+  return { ..._internal.currentConfig };
 };
 exports.setConfig = setConfig;

package/dist/libs/config/set-config.es.js

@@ -1,4 +1,4 @@
-import { currentConfig } from "./get-config.es.js";
+import { currentConfig } from "./_internal.es.js";
 const setConfig = (config) => {
   Object.assign(currentConfig, config);
   return { ...currentConfig };

package/dist/libs/convert/hex-to-rgb.cjs.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const HEX_PATTERN = /^[0-9a-fA-F]+$/;
+const hexToRgb = (hex) => {
+  const trimmed = hex.trim();
+  const normalized = trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;
+  if (!HEX_PATTERN.test(normalized)) return void 0;
+  let expanded;
+  if (normalized.length === 3) {
+    expanded = `${normalized[0]}${normalized[0]}${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}`;
+  } else if (normalized.length === 6) {
+    expanded = normalized;
+  } else {
+    return void 0;
+  }
+  return {
+    r: Number.parseInt(expanded.slice(0, 2), 16),
+    g: Number.parseInt(expanded.slice(2, 4), 16),
+    b: Number.parseInt(expanded.slice(4, 6), 16)
+  };
+};
+exports.hexToRgb = hexToRgb;

package/dist/libs/convert/hex-to-rgb.d.ts

@@ -0,0 +1,16 @@
+/**
+ * RGB color components in 0-255 range.
+ */
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Converts a hex color string to an RGB color object.
+ * Supports `#RGB`, `#RRGGBB` and the same forms without the leading `#`.
+ *
+ * @param hex - Hex color string (e.g. `#fff`, `#ff0000`, `ff0000`)
+ * @returns RGB color object, or `undefined` if the input is not a valid hex color string.
+ */
+export declare const hexToRgb: (hex: string) => RgbColor | undefined;

package/dist/libs/convert/hex-to-rgb.es.js

@@ -0,0 +1,22 @@
+const HEX_PATTERN = /^[0-9a-fA-F]+$/;
+const hexToRgb = (hex) => {
+  const trimmed = hex.trim();
+  const normalized = trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;
+  if (!HEX_PATTERN.test(normalized)) return void 0;
+  let expanded;
+  if (normalized.length === 3) {
+    expanded = `${normalized[0]}${normalized[0]}${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}`;
+  } else if (normalized.length === 6) {
+    expanded = normalized;
+  } else {
+    return void 0;
+  }
+  return {
+    r: Number.parseInt(expanded.slice(0, 2), 16),
+    g: Number.parseInt(expanded.slice(2, 4), 16),
+    b: Number.parseInt(expanded.slice(4, 6), 16)
+  };
+};
+export {
+  hexToRgb
+};

package/dist/libs/convert/hex-to-rgb.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/libs/convert/index.cjs.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const changeDateStringToSpecificFormat = require("./change-date-string-to-specific-format.cjs.js");
+const hexToRgb = require("./hex-to-rgb.cjs.js");
 const jsonStringToJsonObject = require("./json-string-to-json-object.cjs.js");
+const rgbToHex = require("./rgb-to-hex.cjs.js");
 exports.changeDateStringToSpecificFormat = changeDateStringToSpecificFormat.changeDateStringToSpecificFormat;
+exports.hexToRgb = hexToRgb.hexToRgb;
 exports.jsonStringToJsonObject = jsonStringToJsonObject.jsonStringToJsonObject;
+exports.rgbToHex = rgbToHex.rgbToHex;

package/dist/libs/convert/index.d.ts

@@ -2,4 +2,6 @@
  * Convert functions
  */
 export * from './change-date-string-to-specific-format';
+export * from './hex-to-rgb';
 export * from './json-string-to-json-object';
+export * from './rgb-to-hex';

package/dist/libs/convert/index.es.js

@@ -1,6 +1,10 @@
 import { changeDateStringToSpecificFormat } from "./change-date-string-to-specific-format.es.js";
+import { hexToRgb } from "./hex-to-rgb.es.js";
 import { jsonStringToJsonObject } from "./json-string-to-json-object.es.js";
+import { rgbToHex } from "./rgb-to-hex.es.js";
 export {
   changeDateStringToSpecificFormat,
-  jsonStringToJsonObject
+  hexToRgb,
+  jsonStringToJsonObject,
+  rgbToHex
 };

package/dist/libs/convert/rgb-to-hex.cjs.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const sanitizeComponent = (value) => {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(255, Math.round(value)));
+};
+const toHexPair = (value) => sanitizeComponent(value).toString(16).padStart(2, "0");
+const rgbToHex = (r, g, b) => `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`;
+exports.rgbToHex = rgbToHex;

package/dist/libs/convert/rgb-to-hex.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Converts RGB color components to a 6-digit hex color string with leading `#`.
+ *
+ * Each component is rounded to the nearest integer and clamped to `[0, 255]`.
+ * Non-finite values (`NaN`, `Infinity`, `-Infinity`) are treated as `0`.
+ *
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Lowercase hex color string (e.g. `#ff0000`)
+ */
+export declare const rgbToHex: (r: number, g: number, b: number) => string;

package/dist/libs/convert/rgb-to-hex.es.js

@@ -0,0 +1,9 @@
+const sanitizeComponent = (value) => {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(255, Math.round(value)));
+};
+const toHexPair = (value) => sanitizeComponent(value).toString(16).padStart(2, "0");
+const rgbToHex = (r, g, b) => `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`;
+export {
+  rgbToHex
+};

package/dist/libs/convert/rgb-to-hex.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/libs/eventControl/debounce.cjs.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const debounce = (fn, delay) => {
+  if (delay < 0 || !Number.isFinite(delay)) {
+    throw new Error("delay must be a non-negative finite number");
+  }
   let timeoutId = null;
   return (...args) => {
     timeoutId && clearTimeout(timeoutId);

package/dist/libs/eventControl/debounce.d.ts

@@ -4,8 +4,9 @@ type DebounceProcedure = (...args: unknown[]) => void;
  *
  * @template F - The type of the function to debounce.
  * @param {F} fn - The function to debounce.
- * @param {number} delay - The number of milliseconds to delay.
+ * @param {number} delay - The number of milliseconds to delay. Must be a non-negative finite number.
  * @returns {(...args: Parameters<F>) => void} - A debounced version of the provided function.
+ * @throws {Error} If delay is negative or not finite.
  */
 export declare const debounce: <F extends DebounceProcedure>(fn: F, delay: number) => ((...args: Parameters<F>) => void);
 export {};

package/dist/libs/eventControl/debounce.es.js

@@ -1,4 +1,7 @@
 const debounce = (fn, delay) => {
+  if (delay < 0 || !Number.isFinite(delay)) {
+    throw new Error("delay must be a non-negative finite number");
+  }
   let timeoutId = null;
   return (...args) => {
     timeoutId && clearTimeout(timeoutId);

package/dist/libs/eventControl/throttle.cjs.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const throttle = (fn, wait) => {
+  if (wait < 0 || !Number.isFinite(wait)) {
+    throw new Error("wait must be a non-negative finite number");
+  }
   let lastCallTime = 0;
   return (...args) => {
     const currentTime = Date.now();

package/dist/libs/eventControl/throttle.d.ts

@@ -5,8 +5,9 @@ type ThrottleFunction = (...args: unknown[]) => void;
  *
  * @template F - The type of the function to be throttled.
  * @param fn - The function to throttle.
- * @param wait - The number of milliseconds to wait before allowing the next execution.
+ * @param wait - The number of milliseconds to wait before allowing the next execution. Must be a non-negative finite number.
  * @returns A throttled version of the provided function.
+ * @throws {Error} If wait is negative or not finite.
  */
 export declare const throttle: <F extends ThrottleFunction>(fn: F, wait: number) => ((...args: Parameters<F>) => void);
 export {};

package/dist/libs/eventControl/throttle.es.js

@@ -1,4 +1,7 @@
 const throttle = (fn, wait) => {
+  if (wait < 0 || !Number.isFinite(wait)) {
+    throw new Error("wait must be a non-negative finite number");
+  }
   let lastCallTime = 0;
   return (...args) => {
     const currentTime = Date.now();

package/dist/libs/get/get-aspect-ratio.cjs.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const getGcd = require("./get-gcd.cjs.js");
 const getAspectRatio = (w, h) => {
+  if (w <= 0 || h <= 0 || !Number.isFinite(w) || !Number.isFinite(h)) {
+    throw new Error("Width and height must be positive finite numbers");
+  }
   const gcd = getGcd.getGcd(w, h);
   return { w: w / gcd, h: h / gcd };
 };

package/dist/libs/get/get-aspect-ratio.d.ts

@@ -1,9 +1,10 @@
 /**
  * Returns the aspect ratio of the given width and height.
  *
- * @param w - The width value.
- * @param h - The height value.
+ * @param w - The width value. Must be a positive number.
+ * @param h - The height value. Must be a positive number.
  * @returns An object containing the width and height of the aspect ratio.
+ * @throws {Error} If width or height is not a positive number.
  */
 export declare const getAspectRatio: (w: number, h: number) => {
     w: number;

package/dist/libs/get/get-aspect-ratio.es.js

@@ -1,5 +1,8 @@
 import { getGcd } from "./get-gcd.es.js";
 const getAspectRatio = (w, h) => {
+  if (w <= 0 || h <= 0 || !Number.isFinite(w) || !Number.isFinite(h)) {
+    throw new Error("Width and height must be positive finite numbers");
+  }
   const gcd = getGcd(w, h);
   return { w: w / gcd, h: h / gcd };
 };

package/dist/libs/get/get-orientation.cjs.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const getOrientation = () => {
+  if (typeof window === "undefined") {
+    return "portrait";
+  }
   const isLandscape = window.matchMedia("(orientation: landscape)").matches;
   return isLandscape ? "landscape" : "portrait";
 };

package/dist/libs/get/get-orientation.d.ts

@@ -2,5 +2,6 @@
  * Retrieves the current orientation of the device.
  *
  * @returns {'landscape' | 'portrait'} The current orientation, either 'landscape' or 'portrait'.
+ * Returns 'portrait' as default in SSR environments where window is undefined.
  */
 export declare const getOrientation: () => "landscape" | "portrait";

package/dist/libs/get/get-orientation.es.js

@@ -1,4 +1,7 @@
 const getOrientation = () => {
+  if (typeof window === "undefined") {
+    return "portrait";
+  }
   const isLandscape = window.matchMedia("(orientation: landscape)").matches;
   return isLandscape ? "landscape" : "portrait";
 };

package/dist/libs/get/get-scrollbar-width.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const getScrollbarWidth = () => window.innerWidth - document.body.clientWidth;
+const getScrollbarWidth = () => window.innerWidth - document.documentElement.clientWidth;
 exports.getScrollbarWidth = getScrollbarWidth;

package/dist/libs/get/get-scrollbar-width.d.ts

@@ -1,6 +1,9 @@
 /**
  * Retrieves the width of the scrollbar.
  *
+ * Uses document.documentElement.clientWidth instead of document.body.clientWidth
+ * to ensure accurate measurement regardless of body element styling (e.g., max-width, margin).
+ *
  * @returns {number} The width of the scrollbar in pixels.
  */
 export declare const getScrollbarWidth: () => number;

package/dist/libs/get/get-scrollbar-width.es.js

@@ -1,4 +1,4 @@
-const getScrollbarWidth = () => window.innerWidth - document.body.clientWidth;
+const getScrollbarWidth = () => window.innerWidth - document.documentElement.clientWidth;
 export {
   getScrollbarWidth
 };

package/dist/libs/get/get-style-property-value-to-number.cjs.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const getStylePropertyValue = require("./get-style-property-value.cjs.js");
-const getStylePropertyValueToNumber = (key) => Number.parseInt(getStylePropertyValue.getStylePropertyValue(key), 10) || 0;
+const getStylePropertyValueToNumber = (key) => Number.parseFloat(getStylePropertyValue.getStylePropertyValue(key)) || 0;
 exports.getStylePropertyValueToNumber = getStylePropertyValueToNumber;

package/dist/libs/get/get-style-property-value-to-number.es.js

@@ -1,5 +1,5 @@
 import { getStylePropertyValue } from "./get-style-property-value.es.js";
-const getStylePropertyValueToNumber = (key) => Number.parseInt(getStylePropertyValue(key), 10) || 0;
+const getStylePropertyValueToNumber = (key) => Number.parseFloat(getStylePropertyValue(key)) || 0;
 export {
   getStylePropertyValueToNumber
 };

package/dist/libs/get/get-ua-data.cjs.js

@@ -11,11 +11,11 @@ const getUaData = () => {
   const osName = result.os.name;
   const type = result.device.type;
   const uaString = {
-    browserName: browserName ? browserName.toLowerCase().replace(" ", "-") : "",
+    browserName: browserName ? browserName.toLowerCase().replace(/ /g, "-") : "",
     browserVersion: browserVersion ? browserVersion : "",
-    browserEngine: browserEngine ? browserEngine.toLowerCase().replace(" ", "-") : "",
-    osName: osName ? osName.toLowerCase().replace(" ", "-") : "",
-    type: typeof type !== "undefined" ? type.toLowerCase().replace(" ", "-") : "laptop",
+    browserEngine: browserEngine ? browserEngine.toLowerCase().replace(/ /g, "-") : "",
+    osName: osName ? osName.toLowerCase().replace(/ /g, "-") : "",
+    type: typeof type !== "undefined" ? type.toLowerCase().replace(/ /g, "-") : "laptop",
     touchSupport: isTouchSupport.isTouchSupport()
   };
   return uaString;

package/dist/libs/get/get-ua-data.es.js

@@ -9,11 +9,11 @@ const getUaData = () => {
   const osName = result.os.name;
   const type = result.device.type;
   const uaString = {
-    browserName: browserName ? browserName.toLowerCase().replace(" ", "-") : "",
+    browserName: browserName ? browserName.toLowerCase().replace(/ /g, "-") : "",
     browserVersion: browserVersion ? browserVersion : "",
-    browserEngine: browserEngine ? browserEngine.toLowerCase().replace(" ", "-") : "",
-    osName: osName ? osName.toLowerCase().replace(" ", "-") : "",
-    type: typeof type !== "undefined" ? type.toLowerCase().replace(" ", "-") : "laptop",
+    browserEngine: browserEngine ? browserEngine.toLowerCase().replace(/ /g, "-") : "",
+    osName: osName ? osName.toLowerCase().replace(/ /g, "-") : "",
+    type: typeof type !== "undefined" ? type.toLowerCase().replace(/ /g, "-") : "laptop",
     touchSupport: isTouchSupport()
   };
   return uaString;

package/dist/libs/is/is-after-date-time.cjs.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const dayjs = require("dayjs");
 const isAfterDateTime = (dateA, now = dayjs()) => {
+  if (!dayjs(dateA).isValid()) {
+    throw new Error("dateA is not a valid date");
+  }
   return now.isAfter(dayjs(dateA), "millisecond");
 };
 exports.isAfterDateTime = isAfterDateTime;

package/dist/libs/is/is-after-date-time.d.ts

@@ -6,5 +6,6 @@ import { default as dayjs } from 'dayjs';
  * @param dateA - A date/time string to compare, parsed with dayjs.
  * @param now - Optional reference time as a Dayjs object; defaults to current time.
  * @returns `true` if `now` is strictly after the parsed `dateA` at millisecond precision; otherwise `false`.
+ * @throws Will throw an error if dateA is not a valid date.
  */
 export declare const isAfterDateTime: (dateA: string, now?: dayjs.Dayjs) => boolean;

package/dist/libs/is/is-after-date-time.es.js

@@ -1,5 +1,8 @@
 import dayjs from "dayjs";
 const isAfterDateTime = (dateA, now = dayjs()) => {
+  if (!dayjs(dateA).isValid()) {
+    throw new Error("dateA is not a valid date");
+  }
   return now.isAfter(dayjs(dateA), "millisecond");
 };
 export {

package/dist/libs/is/is-in-viewport.cjs.js

@@ -5,7 +5,7 @@ const parseRootMargin = (rootMargin) => {
   const parseValue = (value) => {
     if (value.endsWith("%")) {
       const percent = Number.parseFloat(value) / 100;
-      return window.innerHeight * percent;
+      return window.innerWidth * percent;
     }
     return Number.parseFloat(value) || 0;
   };

package/dist/libs/is/is-in-viewport.es.js

@@ -3,7 +3,7 @@ const parseRootMargin = (rootMargin) => {
   const parseValue = (value) => {
     if (value.endsWith("%")) {
       const percent = Number.parseFloat(value) / 100;
-      return window.innerHeight * percent;
+      return window.innerWidth * percent;
     }
     return Number.parseFloat(value) || 0;
   };

package/dist/libs/is/is-ipad.cjs.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const getOrientation = require("../get/get-orientation.cjs.js");
 const getUaData = require("../get/get-ua-data.cjs.js");
 const isIpad = (orientation = "portrait") => {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return false;
+  }
   const clientData = getUaData.getUaData();
   if (!clientData.touchSupport) return false;
   return clientData.type === "laptop" && clientData.osName === "mac-os" && clientData.browserName === "safari" && getOrientation.getOrientation() === orientation;

package/dist/libs/is/is-ipad.d.ts

@@ -4,6 +4,7 @@ type Orientation = 'portrait' | 'landscape';
  *
  * @param orientation - The desired screen orientation ('portrait' or 'landscape'). Defaults to 'portrait'.
  * @returns `true` if the device is an iPad with the specified orientation, otherwise `false`.
+ * Returns `false` in SSR environments where window/navigator is undefined.
  */
 export declare const isIpad: (orientation?: Orientation) => boolean;
 export {};

package/dist/libs/is/is-ipad.es.js

@@ -1,6 +1,9 @@
 import { getOrientation } from "../get/get-orientation.es.js";
 import { getUaData } from "../get/get-ua-data.es.js";
 const isIpad = (orientation = "portrait") => {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return false;
+  }
   const clientData = getUaData();
   if (!clientData.touchSupport) return false;
   return clientData.type === "laptop" && clientData.osName === "mac-os" && clientData.browserName === "safari" && getOrientation() === orientation;

package/dist/libs/security/html-sanitize.cjs.js

@@ -4,4 +4,6 @@ const DOMPurify = require("isomorphic-dompurify");
 const htmlSanitize = (html, config = {}) => {
   return DOMPurify.sanitize(html, config);
 };
+const sanitizeHtml = htmlSanitize;
 exports.htmlSanitize = htmlSanitize;
+exports.sanitizeHtml = sanitizeHtml;

package/dist/libs/security/html-sanitize.d.ts

@@ -7,3 +7,12 @@ import { default as DOMPurify } from 'isomorphic-dompurify';
  * @returns The sanitized HTML string.
  */
 export declare const htmlSanitize: (html: string, config?: Parameters<typeof DOMPurify.sanitize>[1]) => string;
+/**
+ * Alias for htmlSanitize.
+ * Sanitizes the given HTML string to prevent XSS attacks.
+ *
+ * @param html - The HTML string to sanitize.
+ * @param config - Optional configuration for DOMPurify.
+ * @returns The sanitized HTML string.
+ */
+export declare const sanitizeHtml: (html: string, config?: Parameters<typeof DOMPurify.sanitize>[1]) => string;

package/dist/libs/security/html-sanitize.es.js

@@ -2,6 +2,8 @@ import DOMPurify from "isomorphic-dompurify";
 const htmlSanitize = (html, config = {}) => {
   return DOMPurify.sanitize(html, config);
 };
+const sanitizeHtml = htmlSanitize;
 export {
-  htmlSanitize
+  htmlSanitize,
+  sanitizeHtml
 };

package/dist/libs/security/index.cjs.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const htmlSanitize = require("./html-sanitize.cjs.js");
 exports.htmlSanitize = htmlSanitize.htmlSanitize;
+exports.sanitizeHtml = htmlSanitize.sanitizeHtml;

package/dist/libs/security/index.es.js

@@ -1,4 +1,5 @@
-import { htmlSanitize } from "./html-sanitize.es.js";
+import { htmlSanitize, sanitizeHtml } from "./html-sanitize.es.js";
 export {
-  htmlSanitize
+  htmlSanitize,
+  sanitizeHtml
 };

package/dist/libs/transform/wrap-text-with-spans.cjs.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const runes2 = require("runes2");
 const wrapTextWithSpans = (element) => {
   if (!element) return;
   if (element.nodeType === Node.TEXT_NODE) {
     const textContent = (element.textContent || "").trim();
     const fragment = document.createDocumentFragment();
-    for (const char of textContent) {
+    const graphemes = runes2.runes(textContent);
+    for (const grapheme of graphemes) {
       const span = document.createElement("span");
-      span.textContent = char;
+      span.textContent = grapheme;
       fragment.appendChild(span);
     }
     element.replaceWith(fragment);

package/dist/libs/transform/wrap-text-with-spans.d.ts

@@ -1,10 +1,15 @@
 /**
- * Wraps each character of the text content of an HTML element with individual <span> elements.
+ * Wraps each grapheme cluster (visual character) of the text content of an HTML element with individual <span> elements.
  *
  * @param element - The HTML element whose text content will be wrapped with <span> elements.
  *
  * This function recursively processes the given element and its child nodes. If the node is a text node,
- * it replaces the text content with a series of <span> elements, each containing a single character from the text.
+ * it replaces the text content with a series of <span> elements, each containing a single grapheme cluster from the text.
  * If the node is an element node, it recursively processes its child nodes.
+ *
+ * This function correctly handles:
+ * - Composite emojis (e.g., 👨‍👩‍👧‍👦, 👍🏻)
+ * - Flag emojis (e.g., 🇯🇵)
+ * - Combined characters
  */
 export declare const wrapTextWithSpans: (element: HTMLElement) => void;

package/dist/libs/transform/wrap-text-with-spans.es.js

@@ -1,11 +1,13 @@
+import { runes } from "runes2";
 const wrapTextWithSpans = (element) => {
   if (!element) return;
   if (element.nodeType === Node.TEXT_NODE) {
     const textContent = (element.textContent || "").trim();
     const fragment = document.createDocumentFragment();
-    for (const char of textContent) {
+    const graphemes = runes(textContent);
+    for (const grapheme of graphemes) {
       const span = document.createElement("span");
-      span.textContent = char;
+      span.textContent = grapheme;
       fragment.appendChild(span);
     }
     element.replaceWith(fragment);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umaki",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "A utility that is often used in web production.",
   "author": "TsubasaHiga",
   "homepage": "https://github.com/TsubasaHiga/umaki",