@just-web/css 0.6.0 → 0.7.0

package/cjs/convertors/px_2_num.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Converts pixel values to numbers.
+ *
+ * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')
+ * @returns The numeric value
+ *
+ * @example
+ * ```ts
+ * px2num(16) // 16
+ * px2num('32px') // 32
+ * px2num('12.5px') // 12.5
+ * px2num('0px') // 0
+ * ```
+ */
+export declare function px2num(px: number | string | undefined): number;

package/cjs/convertors/px_2_num.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.px2num = px2num;
+function px2num(px) {
+  return typeof px === "string" ? Number.parseFloat(px.replace(/px$/, "")) : Number(px);
+}

package/cjs/convertors/px_2_rem.d.ts

@@ -18,4 +18,4 @@
 export declare function px2rem(px: number | string, options?: {
     base?: number | undefined;
     precision?: number | undefined;
-}): string;
+}): number;

package/cjs/convertors/px_2_rem.js

@@ -13,5 +13,5 @@ function px2rem(px, options) {
     px = px.replace(/px$/, "");
     px = Number.parseFloat(px);
   }
-  return (px / base).toFixed(precision);
+  return Number((px / base).toFixed(precision));
 }

package/cjs/convertors/rem_2_px.d.ts

@@ -18,4 +18,4 @@
 export declare function rem2px(rem: number | string, options?: {
     base?: number | undefined;
     precision?: number | undefined;
-}): string;
+}): number;

package/cjs/convertors/rem_2_px.js

@@ -13,5 +13,5 @@ function rem2px(rem, options) {
     rem = rem.replace(/rem$/, "");
     rem = Number.parseFloat(rem);
   }
-  return (rem * base).toFixed(precision);
+  return Number((rem * base).toFixed(precision));
 }

package/cjs/index.d.ts

@@ -1,3 +1,4 @@
+export * from './convertors/px_2_num.ts';
 export * from './convertors/px_2_rem.ts';
 export * from './convertors/rem_2_px.ts';
 export * from './css-properties/css-properties.ts';

package/cjs/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _px_2_num = require("./convertors/px_2_num.ts");
+Object.keys(_px_2_num).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _px_2_num[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _px_2_num[key];
+    }
+  });
+});
 var _px_2_rem = require("./convertors/px_2_rem.ts");
 Object.keys(_px_2_rem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/props/class-name.d.ts

@@ -6,6 +6,6 @@
  * Interface for component props that include a className property.
  * The className property accepts a string value for CSS class names.
  */
-export interface ClassNameProps {
+export type ClassNameProps = {
     className?: string | undefined;
-}
+};

package/cjs/props/style.d.ts

@@ -2,6 +2,6 @@ import type { CSSProperties } from '../css-properties/css-properties.ts';
 /**
  * Interface for component props that include a style property.
  */
-export interface StyleProps {
+export type StyleProps = {
     style?: CSSProperties | undefined;
-}
+};

package/cjs/utils/prefers-color-scheme.d.ts

@@ -30,4 +30,4 @@ export declare function observePrefersColorScheme<T extends string>(themes: Reco
  * // Returns 'light', 'dark', or null
  * ```
  */
-export declare function getPrefersColorTheme<T extends string>(...themes: T[]): any;
+export declare function getPrefersColorTheme<T extends string>(...themes: T[]): T | null;

package/esm/convertors/px_2_num.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Converts pixel values to numbers.
+ *
+ * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')
+ * @returns The numeric value
+ *
+ * @example
+ * ```ts
+ * px2num(16) // 16
+ * px2num('32px') // 32
+ * px2num('12.5px') // 12.5
+ * px2num('0px') // 0
+ * ```
+ */
+export declare function px2num(px: number | string | undefined): number;
+//# sourceMappingURL=px_2_num.d.ts.map

package/esm/convertors/px_2_num.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"px_2_num.d.ts","sourceRoot":"","sources":["../../src/convertors/px_2_num.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAE9D"}

package/esm/convertors/px_2_num.js

@@ -0,0 +1,18 @@
+/**
+ * Converts pixel values to numbers.
+ *
+ * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')
+ * @returns The numeric value
+ *
+ * @example
+ * ```ts
+ * px2num(16) // 16
+ * px2num('32px') // 32
+ * px2num('12.5px') // 12.5
+ * px2num('0px') // 0
+ * ```
+ */
+export function px2num(px) {
+    return typeof px === 'string' ? Number.parseFloat(px.replace(/px$/, '')) : Number(px);
+}
+//# sourceMappingURL=px_2_num.js.map

package/esm/convertors/px_2_num.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"px_2_num.js","sourceRoot":"","sources":["../../src/convertors/px_2_num.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,MAAM,CAAC,EAA+B;IACrD,OAAO,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AACtF,CAAC"}

package/esm/convertors/px_2_rem.d.ts

@@ -18,5 +18,5 @@
 export declare function px2rem(px: number | string, options?: {
     base?: number | undefined;
     precision?: number | undefined;
-}): string;
+}): number;
 //# sourceMappingURL=px_2_rem.d.ts.map

package/esm/convertors/px_2_rem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"px_2_rem.d.ts","sourceRoot":"","sources":["../../src/convertors/px_2_rem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,UASlH"}
+{"version":3,"file":"px_2_rem.d.ts","sourceRoot":"","sources":["../../src/convertors/px_2_rem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CACrB,EAAE,EAAE,MAAM,GAAG,MAAM,EACnB,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,GACrE,MAAM,CASR"}

package/esm/convertors/px_2_rem.js

@@ -21,6 +21,6 @@ export function px2rem(px, options) {
         px = px.replace(/px$/, '');
         px = Number.parseFloat(px);
     }
-    return (px / base).toFixed(precision);
+    return Number((px / base).toFixed(precision));
 }
 //# sourceMappingURL=px_2_rem.js.map

package/esm/convertors/px_2_rem.js.map

@@ -1 +1 @@
-{"version":3,"file":"px_2_rem.js","sourceRoot":"","sources":["../../src/convertors/px_2_rem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CAAC,EAAmB,EAAE,OAAuE;IAClH,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAElD,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC5B,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QAC1B,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;IAC3B,CAAC;IAED,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;AACtC,CAAC"}
+{"version":3,"file":"px_2_rem.js","sourceRoot":"","sources":["../../src/convertors/px_2_rem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CACrB,EAAmB,EACnB,OAAuE;IAEvE,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAElD,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC5B,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QAC1B,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;IAC3B,CAAC;IAED,OAAO,MAAM,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;AAC9C,CAAC"}

package/esm/convertors/rem_2_px.d.ts

@@ -18,5 +18,5 @@
 export declare function rem2px(rem: number | string, options?: {
     base?: number | undefined;
     precision?: number | undefined;
-}): string;
+}): number;
 //# sourceMappingURL=rem_2_px.d.ts.map

package/esm/convertors/rem_2_px.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rem_2_px.d.ts","sourceRoot":"","sources":["../../src/convertors/rem_2_px.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,UASnH"}
+{"version":3,"file":"rem_2_px.d.ts","sourceRoot":"","sources":["../../src/convertors/rem_2_px.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CACrB,GAAG,EAAE,MAAM,GAAG,MAAM,EACpB,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,GACrE,MAAM,CASR"}

package/esm/convertors/rem_2_px.js

@@ -21,6 +21,6 @@ export function rem2px(rem, options) {
         rem = rem.replace(/rem$/, '');
         rem = Number.parseFloat(rem);
     }
-    return (rem * base).toFixed(precision);
+    return Number((rem * base).toFixed(precision));
 }
 //# sourceMappingURL=rem_2_px.js.map

package/esm/convertors/rem_2_px.js.map

@@ -1 +1 @@
-{"version":3,"file":"rem_2_px.js","sourceRoot":"","sources":["../../src/convertors/rem_2_px.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CAAC,GAAoB,EAAE,OAAuE;IACnH,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAElD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC7B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;QAC7B,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC;IAED,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;AACvC,CAAC"}
+{"version":3,"file":"rem_2_px.js","sourceRoot":"","sources":["../../src/convertors/rem_2_px.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CACrB,GAAoB,EACpB,OAAuE;IAEvE,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAElD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC7B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;QAC7B,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC;IAED,OAAO,MAAM,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;AAC/C,CAAC"}

package/esm/index.d.ts

@@ -1,3 +1,4 @@
+export * from './convertors/px_2_num.ts';
 export * from './convertors/px_2_rem.ts';
 export * from './convertors/rem_2_px.ts';
 export * from './css-properties/css-properties.ts';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/esm/index.js

@@ -1,3 +1,4 @@
+export * from "./convertors/px_2_num.js";
 export * from "./convertors/px_2_rem.js";
 export * from "./convertors/rem_2_px.js";
 export * from "./css-properties/css-properties.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/esm/props/class-name.d.ts

@@ -6,7 +6,7 @@
  * Interface for component props that include a className property.
  * The className property accepts a string value for CSS class names.
  */
-export interface ClassNameProps {
+export type ClassNameProps = {
     className?: string | undefined;
-}
+};
 //# sourceMappingURL=class-name.d.ts.map

package/esm/props/class-name.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"class-name.d.ts","sourceRoot":"","sources":["../../src/props/class-name.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B"}
+{"version":3,"file":"class-name.d.ts","sourceRoot":"","sources":["../../src/props/class-name.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B,CAAA"}

package/esm/props/style.d.ts

@@ -2,7 +2,7 @@ import type { CSSProperties } from '../css-properties/css-properties.ts';
 /**
  * Interface for component props that include a style property.
  */
-export interface StyleProps {
+export type StyleProps = {
     style?: CSSProperties | undefined;
-}
+};
 //# sourceMappingURL=style.d.ts.map

package/esm/props/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/props/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAExE;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;CACjC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/props/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAExE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;CACjC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/css",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "CSS types and utilities",
   "type": "module",
   "exports": {
@@ -24,38 +24,30 @@
     "type-plus": "8.0.0-beta.7"
   },
   "devDependencies": {
-    "@repobuddy/storybook": "^0.12.0",
+    "@repobuddy/storybook": "^1.0.0",
     "@repobuddy/vitest": "^1.2.2",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-addon-test": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/preview-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@storybook/addon-docs": "^9.0.3",
+    "@storybook/addon-vitest": "9.0.3",
+    "@storybook/react-vite": "^9.0.3",
     "@tailwindcss/cli": "^4.1.6",
     "@tailwindcss/vite": "^4.1.6",
-    "@vitest/browser": "^3.1.3",
-    "@vitest/coverage-v8": "^3.1.3",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "dedent": "^1.6.0",
     "ncp": "^2.0.0",
-    "playwright": "^1.52.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
-    "storybook": "^8.6.12",
-    "storybook-addon-code-editor": "^4.1.1",
-    "storybook-addon-tag-badges": "^1.4.0",
-    "storybook-addon-vis": "^0.19.4",
-    "storybook-dark-mode": "^4.0.2",
+    "storybook": "^9.0.3",
+    "storybook-addon-code-editor": "^5.0.0",
+    "storybook-addon-tag-badges": "^2.0.0",
+    "storybook-addon-vis": "^2.1.0",
+    "storybook-dark-mode2": "^5.0.2",
     "tailwindcss": "^4.1.6",
     "typescript": "^5.8.3",
     "unbuild": "^3.5.0",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3",
+    "vitest": "^3.2.4",
     "vitest-browser-react": "^0.1.1",
     "@tools/typescript": "^0.0.1"
   },

package/src/convertors/px_2_num.ts

@@ -0,0 +1,17 @@
+/**
+ * Converts pixel values to numbers.
+ *
+ * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')
+ * @returns The numeric value
+ *
+ * @example
+ * ```ts
+ * px2num(16) // 16
+ * px2num('32px') // 32
+ * px2num('12.5px') // 12.5
+ * px2num('0px') // 0
+ * ```
+ */
+export function px2num(px: number | string | undefined): number {
+	return typeof px === 'string' ? Number.parseFloat(px.replace(/px$/, '')) : Number(px)
+}

package/src/convertors/px_2_rem.ts

@@ -15,7 +15,10 @@
  * px2rem(13, { precision: 2 }) // '0.81'
  * ```
  */
-export function px2rem(px: number | string, options?: { base?: number | undefined; precision?: number | undefined }) {
+export function px2rem(
+	px: number | string,
+	options?: { base?: number | undefined; precision?: number | undefined },
+): number {
 	const { base = 16, precision = 4 } = options ?? {}
 
 	if (typeof px === 'string') {
@@ -23,5 +26,5 @@ export function px2rem(px: number | string, options?: { base?: number | undefine
 		px = Number.parseFloat(px)
 	}
 
-	return (px / base).toFixed(precision)
+	return Number((px / base).toFixed(precision))
 }

package/src/convertors/rem_2_px.ts

@@ -15,7 +15,10 @@
  * rem2px(0.8125, { precision: 2 }) // '13.00'
  * ```
  */
-export function rem2px(rem: number | string, options?: { base?: number | undefined; precision?: number | undefined }) {
+export function rem2px(
+	rem: number | string,
+	options?: { base?: number | undefined; precision?: number | undefined },
+): number {
 	const { base = 16, precision = 4 } = options ?? {}
 
 	if (typeof rem === 'string') {
@@ -23,5 +26,5 @@ export function rem2px(rem: number | string, options?: { base?: number | undefin
 		rem = Number.parseFloat(rem)
 	}
 
-	return (rem * base).toFixed(precision)
+	return Number((rem * base).toFixed(precision))
 }

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './convertors/px_2_num.ts'
 export * from './convertors/px_2_rem.ts'
 export * from './convertors/rem_2_px.ts'
 export * from './css-properties/css-properties.ts'

package/src/props/class-name.ts

@@ -7,6 +7,6 @@
  * Interface for component props that include a className property.
  * The className property accepts a string value for CSS class names.
  */
-export interface ClassNameProps {
+export type ClassNameProps = {
 	className?: string | undefined
 }

package/src/props/style.ts

@@ -3,6 +3,6 @@ import type { CSSProperties } from '../css-properties/css-properties.ts'
 /**
  * Interface for component props that include a style property.
  */
-export interface StyleProps {
+export type StyleProps = {
 	style?: CSSProperties | undefined
 }