@just-web/css 0.6.1 → 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/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/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.1",
+  "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/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
 }