@just-web/toolkits 2.1.0 → 3.1.0

package/dist/units/parse-css-value.mjs

@@ -0,0 +1,31 @@
+//#region src/units/parse-css-value.ts
+/**
+* Parses a CSS value in one pass and returns both the numeric part and the unit.
+* Powers parseCssNumber, getCssUnit, and isEffectivelyZero.
+*
+* @param value - The CSS value to parse. Can be a number or string (e.g. '16px', '1.5rem', '100%')
+* @returns A tuple of [number, unit | undefined]. Unit is undefined for numbers or unitless strings.
+*
+* @example
+* ```ts
+* parseCssValue('16px')    // [16, 'px']
+* parseCssValue('1.5rem')  // [1.5, 'rem']
+* parseCssValue('100%')    // [100, '%']
+* parseCssValue('0')       // [0, undefined]
+* parseCssValue(16)        // [16, undefined]
+* parseCssValue('abc')     // [NaN, undefined]
+* ```
+*/
+function parseCssValue(value) {
+	if (value === void 0 || value === null) return [value, void 0];
+	if (typeof value === "number") return [value, void 0];
+	const match = String(value).trim().match(/^(-?\d*\.?\d+)\s*(.*)$/);
+	if (!match) return [NaN, void 0];
+	const num = Number.parseFloat(match[1] ?? "");
+	const unit = (match[2] ?? "").trim();
+	return [num, unit === "" ? void 0 : unit];
+}
+
+//#endregion
+export { parseCssValue };
+//# sourceMappingURL=parse-css-value.mjs.map

package/dist/units/parse-css-value.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-css-value.mjs","names":[],"sources":["../../src/units/parse-css-value.ts"],"sourcesContent":["/**\n * Parses a CSS value in one pass and returns both the numeric part and the unit.\n * Powers parseCssNumber, getCssUnit, and isEffectivelyZero.\n *\n * @param value - The CSS value to parse. Can be a number or string (e.g. '16px', '1.5rem', '100%')\n * @returns A tuple of [number, unit | undefined]. Unit is undefined for numbers or unitless strings.\n *\n * @example\n * ```ts\n * parseCssValue('16px')    // [16, 'px']\n * parseCssValue('1.5rem')  // [1.5, 'rem']\n * parseCssValue('100%')    // [100, '%']\n * parseCssValue('0')       // [0, undefined]\n * parseCssValue(16)        // [16, undefined]\n * parseCssValue('abc')     // [NaN, undefined]\n * ```\n */\nexport function parseCssValue(\n\tvalue: number | string | null | undefined\n): [number | null | undefined, string | undefined] {\n\tif (value === undefined || value === null) {\n\t\treturn [value, undefined]\n\t}\n\tif (typeof value === 'number') {\n\t\treturn [value, undefined]\n\t}\n\tconst s = String(value).trim()\n\tconst match = s.match(/^(-?\\d*\\.?\\d+)\\s*(.*)$/)\n\tif (!match) {\n\t\treturn [Number.NaN, undefined]\n\t}\n\tconst num = Number.parseFloat(match[1] ?? '')\n\tconst unit = (match[2] ?? '').trim()\n\treturn [num, unit === '' ? undefined : unit]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgB,cACf,OACkD;AAClD,KAAI,UAAU,UAAa,UAAU,KACpC,QAAO,CAAC,OAAO,OAAU;AAE1B,KAAI,OAAO,UAAU,SACpB,QAAO,CAAC,OAAO,OAAU;CAG1B,MAAM,QADI,OAAO,MAAM,CAAC,MAAM,CACd,MAAM,yBAAyB;AAC/C,KAAI,CAAC,MACJ,QAAO,CAAC,KAAY,OAAU;CAE/B,MAAM,MAAM,OAAO,WAAW,MAAM,MAAM,GAAG;CAC7C,MAAM,QAAQ,MAAM,MAAM,IAAI,MAAM;AACpC,QAAO,CAAC,KAAK,SAAS,KAAK,SAAY,KAAK"}

package/dist/units/px-2-rem.cjs

@@ -7,17 +7,20 @@
 * @param options - Optional configuration
 * @param options.base - Base pixel value to calculate rem units from. Defaults to 16
 * @param options.precision - Number of decimal places in the output. Defaults to 4
-* @returns The converted value as a string with 'rem' units
+* @returns The converted value, or null/undefined if input is null/undefined
 *
 * @example
 * ```ts
-* px2rem(16) // '1.0000'
-* px2rem('32px') // '2.0000'
-* px2rem(20, { base: 20 }) // '1.0000'
-* px2rem(13, { precision: 2 }) // '0.81'
+* px2rem(16) // 1
+* px2rem('32px') // 2
+* px2rem(20, { base: 20 }) // 1
+* px2rem(13, { precision: 2 }) // 0.81
+* px2rem(null) // null
+* px2rem(undefined) // undefined
 * ```
 */
 function px2rem(px, options) {
+	if (px === null || px === void 0) return px;
 	const { base = 16, precision = 4 } = options ?? {};
 	if (typeof px === "string") {
 		px = px.replace(/px$/, "");

package/dist/units/px-2-rem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"px-2-rem.cjs","names":[],"sources":["../../src/units/px-2-rem.ts"],"sourcesContent":["/**\n * Converts pixel values to rem units.\n *\n * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate rem units from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'rem' units\n *\n * @example\n * ```ts\n * px2rem(16) // '1.0000'\n * px2rem('32px') // '2.0000'\n * px2rem(20, { base: 20 }) // '1.0000'\n * px2rem(13, { precision: 2 }) // '0.81'\n * ```\n */\nexport function px2rem(\n\tpx: number | string,\n\toptions?: { base?: number | undefined; precision?: number | undefined }\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof px === 'string') {\n\t\tpx = px.replace(/px$/, '')\n\t\tpx = Number.parseFloat(px)\n\t}\n\n\treturn Number((px / base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,SAAgB,OACf,IACA,SACS;CACT,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,OAAO,UAAU;AAC3B,OAAK,GAAG,QAAQ,OAAO,GAAG;AAC1B,OAAK,OAAO,WAAW,GAAG;;AAG3B,QAAO,QAAQ,KAAK,MAAM,QAAQ,UAAU,CAAC"}
+{"version":3,"file":"px-2-rem.cjs","names":[],"sources":["../../src/units/px-2-rem.ts"],"sourcesContent":["/**\n * Converts pixel values to rem units.\n *\n * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate rem units from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value, or null/undefined if input is null/undefined\n *\n * @example\n * ```ts\n * px2rem(16) // 1\n * px2rem('32px') // 2\n * px2rem(20, { base: 20 }) // 1\n * px2rem(13, { precision: 2 }) // 0.81\n * px2rem(null) // null\n * px2rem(undefined) // undefined\n * ```\n */\nexport function px2rem(\n\tpx: number | string | null | undefined,\n\toptions?: { base?: number | undefined; precision?: number | undefined } | undefined\n): number | null | undefined {\n\tif (px === null || px === undefined) return px\n\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof px === 'string') {\n\t\tpx = px.replace(/px$/, '')\n\t\tpx = Number.parseFloat(px)\n\t}\n\n\treturn Number((px / base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,OACf,IACA,SAC4B;AAC5B,KAAI,OAAO,QAAQ,OAAO,OAAW,QAAO;CAE5C,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,OAAO,UAAU;AAC3B,OAAK,GAAG,QAAQ,OAAO,GAAG;AAC1B,OAAK,OAAO,WAAW,GAAG;;AAG3B,QAAO,QAAQ,KAAK,MAAM,QAAQ,UAAU,CAAC"}

package/dist/units/px-2-rem.d.cts

@@ -6,20 +6,22 @@
  * @param options - Optional configuration
  * @param options.base - Base pixel value to calculate rem units from. Defaults to 16
  * @param options.precision - Number of decimal places in the output. Defaults to 4
- * @returns The converted value as a string with 'rem' units
+ * @returns The converted value, or null/undefined if input is null/undefined
  *
  * @example
  * ```ts
- * px2rem(16) // '1.0000'
- * px2rem('32px') // '2.0000'
- * px2rem(20, { base: 20 }) // '1.0000'
- * px2rem(13, { precision: 2 }) // '0.81'
+ * px2rem(16) // 1
+ * px2rem('32px') // 2
+ * px2rem(20, { base: 20 }) // 1
+ * px2rem(13, { precision: 2 }) // 0.81
+ * px2rem(null) // null
+ * px2rem(undefined) // undefined
  * ```
  */
-declare function px2rem(px: number | string, options?: {
+declare function px2rem(px: number | string | null | undefined, options?: {
   base?: number | undefined;
   precision?: number | undefined;
-}): number;
+} | undefined): number | null | undefined;
 //#endregion
 export { px2rem };
 //# sourceMappingURL=px-2-rem.d.cts.map

package/dist/units/px-2-rem.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"px-2-rem.d.cts","names":[],"sources":["../../src/units/px-2-rem.ts"],"sourcesContent":[],"mappings":";;AAiBA;;;;;;;;;;;;;;;;iBAAgB,MAAA"}
+{"version":3,"file":"px-2-rem.d.cts","names":[],"sources":["../../src/units/px-2-rem.ts"],"sourcesContent":[],"mappings":";;AAmBA;;;;;;;;;;;;;;;;;;iBAAgB,MAAA"}

package/dist/units/px-2-rem.d.mts

@@ -6,20 +6,22 @@
  * @param options - Optional configuration
  * @param options.base - Base pixel value to calculate rem units from. Defaults to 16
  * @param options.precision - Number of decimal places in the output. Defaults to 4
- * @returns The converted value as a string with 'rem' units
+ * @returns The converted value, or null/undefined if input is null/undefined
  *
  * @example
  * ```ts
- * px2rem(16) // '1.0000'
- * px2rem('32px') // '2.0000'
- * px2rem(20, { base: 20 }) // '1.0000'
- * px2rem(13, { precision: 2 }) // '0.81'
+ * px2rem(16) // 1
+ * px2rem('32px') // 2
+ * px2rem(20, { base: 20 }) // 1
+ * px2rem(13, { precision: 2 }) // 0.81
+ * px2rem(null) // null
+ * px2rem(undefined) // undefined
  * ```
  */
-declare function px2rem(px: number | string, options?: {
+declare function px2rem(px: number | string | null | undefined, options?: {
   base?: number | undefined;
   precision?: number | undefined;
-}): number;
+} | undefined): number | null | undefined;
 //#endregion
 export { px2rem };
 //# sourceMappingURL=px-2-rem.d.mts.map

package/dist/units/px-2-rem.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"px-2-rem.d.mts","names":[],"sources":["../../src/units/px-2-rem.ts"],"sourcesContent":[],"mappings":";;AAiBA;;;;;;;;;;;;;;;;iBAAgB,MAAA"}
+{"version":3,"file":"px-2-rem.d.mts","names":[],"sources":["../../src/units/px-2-rem.ts"],"sourcesContent":[],"mappings":";;AAmBA;;;;;;;;;;;;;;;;;;iBAAgB,MAAA"}

package/dist/units/px-2-rem.mjs

@@ -6,17 +6,20 @@
 * @param options - Optional configuration
 * @param options.base - Base pixel value to calculate rem units from. Defaults to 16
 * @param options.precision - Number of decimal places in the output. Defaults to 4
-* @returns The converted value as a string with 'rem' units
+* @returns The converted value, or null/undefined if input is null/undefined
 *
 * @example
 * ```ts
-* px2rem(16) // '1.0000'
-* px2rem('32px') // '2.0000'
-* px2rem(20, { base: 20 }) // '1.0000'
-* px2rem(13, { precision: 2 }) // '0.81'
+* px2rem(16) // 1
+* px2rem('32px') // 2
+* px2rem(20, { base: 20 }) // 1
+* px2rem(13, { precision: 2 }) // 0.81
+* px2rem(null) // null
+* px2rem(undefined) // undefined
 * ```
 */
 function px2rem(px, options) {
+	if (px === null || px === void 0) return px;
 	const { base = 16, precision = 4 } = options ?? {};
 	if (typeof px === "string") {
 		px = px.replace(/px$/, "");

package/dist/units/px-2-rem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"px-2-rem.mjs","names":[],"sources":["../../src/units/px-2-rem.ts"],"sourcesContent":["/**\n * Converts pixel values to rem units.\n *\n * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate rem units from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'rem' units\n *\n * @example\n * ```ts\n * px2rem(16) // '1.0000'\n * px2rem('32px') // '2.0000'\n * px2rem(20, { base: 20 }) // '1.0000'\n * px2rem(13, { precision: 2 }) // '0.81'\n * ```\n */\nexport function px2rem(\n\tpx: number | string,\n\toptions?: { base?: number | undefined; precision?: number | undefined }\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof px === 'string') {\n\t\tpx = px.replace(/px$/, '')\n\t\tpx = Number.parseFloat(px)\n\t}\n\n\treturn Number((px / base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgB,OACf,IACA,SACS;CACT,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,OAAO,UAAU;AAC3B,OAAK,GAAG,QAAQ,OAAO,GAAG;AAC1B,OAAK,OAAO,WAAW,GAAG;;AAG3B,QAAO,QAAQ,KAAK,MAAM,QAAQ,UAAU,CAAC"}
+{"version":3,"file":"px-2-rem.mjs","names":[],"sources":["../../src/units/px-2-rem.ts"],"sourcesContent":["/**\n * Converts pixel values to rem units.\n *\n * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate rem units from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value, or null/undefined if input is null/undefined\n *\n * @example\n * ```ts\n * px2rem(16) // 1\n * px2rem('32px') // 2\n * px2rem(20, { base: 20 }) // 1\n * px2rem(13, { precision: 2 }) // 0.81\n * px2rem(null) // null\n * px2rem(undefined) // undefined\n * ```\n */\nexport function px2rem(\n\tpx: number | string | null | undefined,\n\toptions?: { base?: number | undefined; precision?: number | undefined } | undefined\n): number | null | undefined {\n\tif (px === null || px === undefined) return px\n\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof px === 'string') {\n\t\tpx = px.replace(/px$/, '')\n\t\tpx = Number.parseFloat(px)\n\t}\n\n\treturn Number((px / base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,OACf,IACA,SAC4B;AAC5B,KAAI,OAAO,QAAQ,OAAO,OAAW,QAAO;CAE5C,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,OAAO,UAAU;AAC3B,OAAK,GAAG,QAAQ,OAAO,GAAG;AAC1B,OAAK,OAAO,WAAW,GAAG;;AAG3B,QAAO,QAAQ,KAAK,MAAM,QAAQ,UAAU,CAAC"}

package/dist/units/rem-2-px.cjs

@@ -7,17 +7,20 @@
 * @param options - Optional configuration
 * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
 * @param options.precision - Number of decimal places in the output. Defaults to 4
-* @returns The converted value as a string with 'px' units
+* @returns The converted value, or null/undefined if input is null/undefined
 *
 * @example
 * ```ts
-* rem2px(1) // '16.0000'
-* rem2px('2rem') // '32.0000'
-* rem2px(1, { base: 20 }) // '20.0000'
-* rem2px(0.8125, { precision: 2 }) // '13.00'
+* rem2px(1) // 16
+* rem2px('2rem') // 32
+* rem2px(1, { base: 20 }) // 20
+* rem2px(0.8125, { precision: 2 }) // 13
+* rem2px(null) // null
+* rem2px(undefined) // undefined
 * ```
 */
 function rem2px(rem, options) {
+	if (rem === null || rem === void 0) return rem;
 	const { base = 16, precision = 4 } = options ?? {};
 	if (typeof rem === "string") {
 		rem = rem.replace(/rem$/, "");

package/dist/units/rem-2-px.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"rem-2-px.cjs","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":["/**\n * Converts rem values to pixel units.\n *\n * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'px' units\n *\n * @example\n * ```ts\n * rem2px(1) // '16.0000'\n * rem2px('2rem') // '32.0000'\n * rem2px(1, { base: 20 }) // '20.0000'\n * rem2px(0.8125, { precision: 2 }) // '13.00'\n * ```\n */\nexport function rem2px(\n\trem: number | string,\n\toptions?: { base?: number | undefined; precision?: number | undefined }\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\n\treturn Number((rem * base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,SAAgB,OACf,KACA,SACS;CACT,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,QAAQ,UAAU;AAC5B,QAAM,IAAI,QAAQ,QAAQ,GAAG;AAC7B,QAAM,OAAO,WAAW,IAAI;;AAG7B,QAAO,QAAQ,MAAM,MAAM,QAAQ,UAAU,CAAC"}
+{"version":3,"file":"rem-2-px.cjs","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":["/**\n * Converts rem values to pixel units.\n *\n * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value, or null/undefined if input is null/undefined\n *\n * @example\n * ```ts\n * rem2px(1) // 16\n * rem2px('2rem') // 32\n * rem2px(1, { base: 20 }) // 20\n * rem2px(0.8125, { precision: 2 }) // 13\n * rem2px(null) // null\n * rem2px(undefined) // undefined\n * ```\n */\nexport function rem2px(\n\trem: number | string | null | undefined,\n\toptions?: { base?: number | undefined; precision?: number | undefined }\n): number | null | undefined {\n\tif (rem === null || rem === undefined) return rem\n\n\tconst { base = 16, precision = 4 } = options ?? {}\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\treturn Number((rem * base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,OACf,KACA,SAC4B;AAC5B,KAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;CAE9C,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAClD,KAAI,OAAO,QAAQ,UAAU;AAC5B,QAAM,IAAI,QAAQ,QAAQ,GAAG;AAC7B,QAAM,OAAO,WAAW,IAAI;;AAE7B,QAAO,QAAQ,MAAM,MAAM,QAAQ,UAAU,CAAC"}

package/dist/units/rem-2-px.d.cts

@@ -6,20 +6,22 @@
  * @param options - Optional configuration
  * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
  * @param options.precision - Number of decimal places in the output. Defaults to 4
- * @returns The converted value as a string with 'px' units
+ * @returns The converted value, or null/undefined if input is null/undefined
  *
  * @example
  * ```ts
- * rem2px(1) // '16.0000'
- * rem2px('2rem') // '32.0000'
- * rem2px(1, { base: 20 }) // '20.0000'
- * rem2px(0.8125, { precision: 2 }) // '13.00'
+ * rem2px(1) // 16
+ * rem2px('2rem') // 32
+ * rem2px(1, { base: 20 }) // 20
+ * rem2px(0.8125, { precision: 2 }) // 13
+ * rem2px(null) // null
+ * rem2px(undefined) // undefined
  * ```
  */
-declare function rem2px(rem: number | string, options?: {
+declare function rem2px(rem: number | string | null | undefined, options?: {
   base?: number | undefined;
   precision?: number | undefined;
-}): number;
+}): number | null | undefined;
 //#endregion
 export { rem2px };
 //# sourceMappingURL=rem-2-px.d.cts.map

package/dist/units/rem-2-px.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"rem-2-px.d.cts","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":[],"mappings":";;AAiBA;;;;;;;;;;;;;;;;iBAAgB,MAAA"}
+{"version":3,"file":"rem-2-px.d.cts","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":[],"mappings":";;AAmBA;;;;;;;;;;;;;;;;;;iBAAgB,MAAA"}

package/dist/units/rem-2-px.d.mts

@@ -6,20 +6,22 @@
  * @param options - Optional configuration
  * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
  * @param options.precision - Number of decimal places in the output. Defaults to 4
- * @returns The converted value as a string with 'px' units
+ * @returns The converted value, or null/undefined if input is null/undefined
  *
  * @example
  * ```ts
- * rem2px(1) // '16.0000'
- * rem2px('2rem') // '32.0000'
- * rem2px(1, { base: 20 }) // '20.0000'
- * rem2px(0.8125, { precision: 2 }) // '13.00'
+ * rem2px(1) // 16
+ * rem2px('2rem') // 32
+ * rem2px(1, { base: 20 }) // 20
+ * rem2px(0.8125, { precision: 2 }) // 13
+ * rem2px(null) // null
+ * rem2px(undefined) // undefined
  * ```
  */
-declare function rem2px(rem: number | string, options?: {
+declare function rem2px(rem: number | string | null | undefined, options?: {
   base?: number | undefined;
   precision?: number | undefined;
-}): number;
+}): number | null | undefined;
 //#endregion
 export { rem2px };
 //# sourceMappingURL=rem-2-px.d.mts.map

package/dist/units/rem-2-px.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"rem-2-px.d.mts","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":[],"mappings":";;AAiBA;;;;;;;;;;;;;;;;iBAAgB,MAAA"}
+{"version":3,"file":"rem-2-px.d.mts","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":[],"mappings":";;AAmBA;;;;;;;;;;;;;;;;;;iBAAgB,MAAA"}

package/dist/units/rem-2-px.mjs

@@ -6,17 +6,20 @@
 * @param options - Optional configuration
 * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
 * @param options.precision - Number of decimal places in the output. Defaults to 4
-* @returns The converted value as a string with 'px' units
+* @returns The converted value, or null/undefined if input is null/undefined
 *
 * @example
 * ```ts
-* rem2px(1) // '16.0000'
-* rem2px('2rem') // '32.0000'
-* rem2px(1, { base: 20 }) // '20.0000'
-* rem2px(0.8125, { precision: 2 }) // '13.00'
+* rem2px(1) // 16
+* rem2px('2rem') // 32
+* rem2px(1, { base: 20 }) // 20
+* rem2px(0.8125, { precision: 2 }) // 13
+* rem2px(null) // null
+* rem2px(undefined) // undefined
 * ```
 */
 function rem2px(rem, options) {
+	if (rem === null || rem === void 0) return rem;
 	const { base = 16, precision = 4 } = options ?? {};
 	if (typeof rem === "string") {
 		rem = rem.replace(/rem$/, "");

package/dist/units/rem-2-px.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rem-2-px.mjs","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":["/**\n * Converts rem values to pixel units.\n *\n * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'px' units\n *\n * @example\n * ```ts\n * rem2px(1) // '16.0000'\n * rem2px('2rem') // '32.0000'\n * rem2px(1, { base: 20 }) // '20.0000'\n * rem2px(0.8125, { precision: 2 }) // '13.00'\n * ```\n */\nexport function rem2px(\n\trem: number | string,\n\toptions?: { base?: number | undefined; precision?: number | undefined }\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\n\treturn Number((rem * base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgB,OACf,KACA,SACS;CACT,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,QAAQ,UAAU;AAC5B,QAAM,IAAI,QAAQ,QAAQ,GAAG;AAC7B,QAAM,OAAO,WAAW,IAAI;;AAG7B,QAAO,QAAQ,MAAM,MAAM,QAAQ,UAAU,CAAC"}
+{"version":3,"file":"rem-2-px.mjs","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":["/**\n * Converts rem values to pixel units.\n *\n * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value, or null/undefined if input is null/undefined\n *\n * @example\n * ```ts\n * rem2px(1) // 16\n * rem2px('2rem') // 32\n * rem2px(1, { base: 20 }) // 20\n * rem2px(0.8125, { precision: 2 }) // 13\n * rem2px(null) // null\n * rem2px(undefined) // undefined\n * ```\n */\nexport function rem2px(\n\trem: number | string | null | undefined,\n\toptions?: { base?: number | undefined; precision?: number | undefined }\n): number | null | undefined {\n\tif (rem === null || rem === undefined) return rem\n\n\tconst { base = 16, precision = 4 } = options ?? {}\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\treturn Number((rem * base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,OACf,KACA,SAC4B;AAC5B,KAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;CAE9C,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAClD,KAAI,OAAO,QAAQ,UAAU;AAC5B,QAAM,IAAI,QAAQ,QAAQ,GAAG;AAC7B,QAAM,OAAO,WAAW,IAAI;;AAE7B,QAAO,QAAQ,MAAM,MAAM,QAAQ,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/toolkits",
-  "version": "2.1.0",
+  "version": "3.1.0",
   "description": "Toolkits for web applications",
   "homepage": "https://github.com/justland/just-web-foundation/tree/main/libs/toolkits",
   "repository": {

package/src/attributes/observe-attribute.ts

@@ -3,24 +3,29 @@
  *
  * @param handlers - An object mapping attribute names to handler functions.
  * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`.
- * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.
+ * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
  *
  * @example
  * ```ts
- * const observer = observeAttributes({
- *   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),
- *   'class': (attr, value) => console.log(`class changed to: ${value}`)
+ * const unsubscribe = observeAttributes({
+ *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *   'class': (value) => console.log(`class changed to: ${value}`)
  * });
  *
  * // Later, to stop observing:
- * observer.disconnect();
+ * unsubscribe();
  * ```
  */
 export function observeAttributes<T extends string>(
 	handlers: Record<string, (value: T | null) => void>,
 	element?: Element | null | undefined
-) {
-	element = element ?? globalThis.document.documentElement
+): () => void {
+	/* c8 ignore start */
+	if (typeof document === 'undefined') {
+		return () => {}
+	}
+	/* c8 ignore end */
+	element = element ?? document.documentElement
 	const observer = new MutationObserver((mutations) => {
 		for (const mutation of mutations) {
 			const attribute = mutation.attributeName
@@ -33,5 +38,5 @@ export function observeAttributes<T extends string>(
 		attributes: true,
 		attributeFilter: Object.keys(handlers)
 	})
-	return observer
+	return () => observer.disconnect()
 }

package/src/attributes/observe-data-attribute.ts

@@ -3,22 +3,19 @@ import { observeAttributes } from './observe-attribute.ts'
 /**
  * Observes changes to `data-*` attributes on an element and calls corresponding handlers.
  *
- * @param options - Configuration options
- * @param options.handlers - An object mapping `data-*` attribute names to handler functions.
- * @param options.element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`
- * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer
+ * @param handlers - An object mapping `data-*` attribute names to handler functions.
+ * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`
+ * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
  *
  * @example
  * ```ts
- * const observer = observeDataAttributes({
- *   handlers: {
- *     'data-theme': (value) => console.log(`Theme changed to: ${value}`),
- *     'data-mode': (value) => console.log(`Mode changed to: ${value}`)
- *   }
+ * const unsubscribe = observeDataAttributes({
+ *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *   'data-mode': (value) => console.log(`Mode changed to: ${value}`)
  * });
  *
  * // Later, to stop observing:
- * observer.disconnect();
+ * unsubscribe();
  * ```
  */
 export function observeDataAttributes<T extends string, K extends `data-${string}`>(

package/src/index.ts

@@ -19,7 +19,14 @@ export * from './style/just-style.ts'
 export * from './style/resolve-style.ts'
 export * from './style/style-props.ts'
 export * from './style/to-dom-style.ts'
+export * from './units/convert-css-unit.ts'
+export * from './units/create-css-unit-converter.ts'
+export * from './units/css-unit-converter.types.ts'
+export * from './units/get-css-unit.ts'
 export * from './units/get-rem-to-px-scale.ts'
+export * from './units/is-effectively-zero.ts'
+export * from './units/parse-css-number.ts'
+export * from './units/parse-css-value.ts'
 export * from './units/px-2-num.ts'
 export * from './units/px-2-rem.ts'
 export * from './units/rem-2-px.ts'

package/src/react/hooks/use-attribute.ts

@@ -32,7 +32,7 @@ export function useAttribute(
 
 		setValueState(element.getAttribute(attributeName) ?? undefined)
 
-		const observer = observeAttributes(
+		return observeAttributes(
 			{
 				[attributeName]: (next) => {
 					setValueState(next ?? undefined)
@@ -40,7 +40,6 @@ export function useAttribute(
 			},
 			element
 		)
-		return () => observer.disconnect()
 	}, [element, attributeName])
 
 	const setValue = useCallback(

package/src/style/css-properties.ts

@@ -1,6 +1,7 @@
 import type { Properties } from 'csstype'
 
 declare module 'csstype' {
+	// biome-ignore lint/correctness/noUnusedVariables: TLength and TTime are used in the extended Properties type
 	interface Properties<TLength = (string & {}) | 0, TTime = string & {}> extends CustomProperties {}
 }
 
@@ -13,7 +14,8 @@ interface CustomProperties {
  * Widens CSS properties to support custom properties.
  * Allows for string or number values for standard properties,
  * and string values for custom properties with '--' prefix.
- * Defined as a union so plain Properties (e.g. from React) are assignable.
+ *
+ * Note that `React.CSSProperties` (using `csstype`) is augmented so you can use it directly without this type.
  */
 export interface CSSProperties<TLength = string | number, TTime = string & {}>
 	extends Properties<TLength, TTime>,

package/src/theme/class-name/subscribe-class-name.ts

@@ -23,7 +23,7 @@ export function subscribeClassName<Themes extends ThemeMap>(
 	if (!element) return () => {}
 	const parse = options?.parse ?? parseClassName
 	let lastEmitted: keyof Themes | undefined | null = null
-	const observer = observeAttributes(
+	return observeAttributes(
 		{
 			class: (value) => {
 				const entry = parse(themes, value ?? undefined)
@@ -35,5 +35,4 @@ export function subscribeClassName<Themes extends ThemeMap>(
 		},
 		element
 	)
-	return () => observer.disconnect()
 }

package/src/theme/data-attribute/subscribe-data-attribute.ts

@@ -26,7 +26,7 @@ export function subscribeDataAttribute<Themes extends ThemeMap>(
 	if (!element) return () => {}
 	const parse =
 		options?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }))
-	const observer = observeDataAttributes<string, `data-${string}`>(
+	return observeDataAttributes<string, `data-${string}`>(
 		{
 			[attributeName]: (value) => {
 				const entry = parse(themes, value ?? undefined)
@@ -35,5 +35,4 @@ export function subscribeDataAttribute<Themes extends ThemeMap>(
 		},
 		element
 	)
-	return () => observer.disconnect()
 }